/* ═══════════════════════════════════════════════════════════════
         设计基线：GitHub 暗色。底板 #161b22 / 画布 #0d1117 / 描边 #30363d
         文字 #e6edf3（主） #8b949e（次） #6e7681（弱） #484f58（静）
         数字一律 tabular-nums，比例 1.2 阶梯（11/13/16/20/26）
         ═══════════════════════════════════════════════════════════════ */
      /* ── 后台主页 ─────────────────────────────────────────────────── */
      .zqhead { gap: 12px; }
      /* 六项指标共用一块底板，用分隔线切段，而不是六张各自为政的卡片 */
      .zqsum {
        display: grid;
        border: 1px solid #30363d;
        border-radius: 10px;
        background: #161b22;
        overflow: hidden;
      }
      .zqstat {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 14px 16px;
        border-left: 1px solid #21262d;
        min-width: 0;
      }
      .zqstat:first-child { border-left: 0; }
      .zqstat-link { cursor: pointer; transition: background 160ms ease; }
      .zqstat-link:hover { background: #1c2128; }
      .zqstat-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        line-height: 1;
        color: #8b949e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .zqstat-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
      .zqstat-value {
        font-size: 26px;
        line-height: 1.12;
        font-weight: 600;
        color: #e6edf3;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
      }
      .zqstat-sub { font-size: 11px; line-height: 1.3; color: #6e7681; }
      .zqstat-bar { height: 2px; border-radius: 1px; background: #21262d; overflow: hidden; margin-top: 1px; }
      .zqstat-bar-fill { height: 100%; border-radius: 1px; transition: width 400ms ease; }
      @media (max-width: 1023px) {
        .zqstat:nth-child(3n + 1) { border-left: 0; }
        .zqstat:nth-child(n + 4) { border-top: 1px solid #21262d; }
      }
      /* 主面板撑到窗口底部，侧面板按内容收高 */
      .zqhome { align-items: stretch; flex: 1 1 auto !important; min-height: 0; }
      .zqhome > div:last-child { align-self: start; }
      /* 公告：单层条目，靠分隔线分组；正文可滚动，条目不做成卡片 */
      /* 父级是普通块，用 height:100% 而不是 flex:1 才能真正占满卡片 */
      .zqnotices {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
      }
      .zqnotice {
        display: flex;
        gap: 10px;
        padding: 12px 16px;
        border-top: 1px solid #21262d;
      }
      .zqnotice:first-child { border-top: 0; }
      .zqnotice-tag {
        flex: 0 0 auto;
        height: 17px;
        line-height: 15px;
        margin-top: 1px;
        padding: 0 6px;
        border-radius: 4px;
        border: 1px solid rgba(88, 166, 255, 0.35);
        background: rgba(88, 166, 255, 0.12);
        color: #58a6ff;
        font-size: 10px;
        letter-spacing: 0.02em;
      }
      .zqnotice-imp .zqnotice-tag {
        border-color: rgba(248, 81, 73, 0.35);
        background: rgba(248, 81, 73, 0.12);
        color: #f85149;
      }
      .zqnotice-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
      .zqnotice-title { font-size: 14px; font-weight: 500; color: #e6edf3; word-break: break-all; }
      .zqnotice-text { font-size: 13px; line-height: 1.6; color: #8b949e; white-space: pre-wrap; word-break: break-all; }
      .zqnotice-time { font-size: 11px; color: #484f58; font-variant-numeric: tabular-nums; }

      .zqrank {
        display: grid;
        grid-template-columns: 60px 1fr 28px;
        align-items: center;
        gap: 10px;
      }
      .zqrank-name { font-size: 13px; color: #c9d1d9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .zqrank-track { height: 4px; border-radius: 2px; background: #21262d; overflow: hidden; }
      .zqrank-fill { height: 100%; border-radius: 2px; background: #db6d28; transition: width 400ms ease; }
      .zqrank-num { font-size: 12px; color: #8b949e; text-align: right; font-variant-numeric: tabular-nums; }

      .zqempty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 40px 0;
        font-size: 13px;
        color: #484f58;
      }
      .zqempty-sm { padding: 16px 0; font-size: 12px; }
      /* 窄屏：顶栏右侧的汇率/时区信息条自身横向滚动，不把整页撑宽 */
      @media (max-width: 900px) {
        main > header.flex.shrink-0.items-center > div.flex-1.flex.justify-end {
          min-width: 0 !important;
          overflow-x: auto;
          overflow-y: hidden;
        }
        main > header.flex.shrink-0.items-center > div.flex-1.flex.justify-end > div {
          flex-shrink: 1;
          min-width: 0;
        }
        main > header.flex.shrink-0.items-center { min-width: 0; }
      }

      /* 窄屏单列：公告板按内容自然增高，不做内部滚动（否则第二条被切） */
      @media (max-width: 1023px) {
        .zqhome { align-items: start; }
        .zqhome > div:last-child { align-self: stretch; }
        .zqnotices { height: auto; max-height: none; overflow: visible; }
      }

      /* ── 滚动条：macOS 的 overlay 滚动条不滚动就不显示，这里改成常显细条 ── */
      * { scrollbar-width: thin; scrollbar-color: #30363d transparent; }
      ::-webkit-scrollbar { width: 10px; height: 10px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb {
        background: #30363d; border-radius: 6px;
        border: 2px solid transparent; background-clip: content-box;
      }
      ::-webkit-scrollbar-thumb:hover { background: #484f58; background-clip: content-box; }
      ::-webkit-scrollbar-corner { background: transparent; }

      /* ── 侧栏导航 ─────────────────────────────────────────────────── */
      /* 分组标题：大写小字 + 细分隔线，取代原来的 15px 粗体大字 */
      [data-slot=sidebar-group] > div > div:first-child {
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6e7681 !important;
        padding: 0 10px !important;
        margin: 14px 0 6px !important;
      }
      [data-slot=sidebar-group]:first-of-type > div > div:first-child { margin-top: 4px !important; }
      /* 菜单项：高度收紧到 32px、圆角 8px、hover 只换底色不加描边 */
      [data-slot=sidebar-menu-button] {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
        gap: 10px !important;
        border-radius: 8px !important;
        border: 1px solid transparent !important;
        font-size: 13.5px !important;
        font-weight: 450 !important;
        color: #c9d1d9 !important;
        transition: background 140ms ease, color 140ms ease;
      }
      [data-slot=sidebar-menu-button]:hover { background: #1c2128 !important; color: #e6edf3 !important; }
      [data-slot=sidebar-menu-button] svg { width: 16px !important; height: 16px !important; opacity: .85; }
      /* 选中态：左侧 2px 红条 + 红色底，去掉整圈红框 */
      [data-slot=sidebar-menu-button][data-active=true],
      [data-slot=sidebar-menu-button][aria-current=page] {
        background: rgba(248, 81, 73, .12) !important;
        color: #ff7b72 !important;
        border-color: transparent !important;
        box-shadow: inset 2px 0 0 #f85149;
      }
      [data-slot=sidebar-menu-button][data-active=true] svg,
      [data-slot=sidebar-menu-button][aria-current=page] svg { color: #f85149 !important; opacity: 1; }
      /* 分组之间的留白收紧 */
      [data-slot=sidebar-group] { padding-bottom: 2px !important; }
      [data-slot=sidebar-group] [data-slot=sidebar-menu] { gap: 1px !important; }

      /* 设备卡头部：名字必须保住最小宽度，图标行在窄卡时整体换到下一行 */
      .zqdevgrid .zqdevname { flex: 1 1 120px !important; min-width: 120px !important; }
      .zqdevgrid .zqdevacts { flex: 0 0 auto; }
      @container (max-width: 300px) { .zqdevgrid .zqdevacts { margin-left: 0 !important; } }

      /* 设备卡：标签与值之间留 6px，避免「应用名称:Test」粘连 */
      .zqdevgrid .truncate { letter-spacing: 0; }

      /* ── APK构建页：两列（左＝配置/自动构建 上、历史/日志 下；右＝预览） ── */
      /* CDN 下载加速卡已整体删除，三列改两列：
         左列纵向 = 基础配置 + 自动构建 + 构建目标（上）→ 构建历史 + 日志（下）
         右列整块留给三张预览，宽度从 711 涨到 ~950 */
      .zqbuildgrid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
        width: 100%;
        max-width: 2400px;
        margin: 0 auto;
        min-height: calc(100vh - 148px);
      }
      /* 第 1 列上：基础配置 / 自动构建 / 构建目标 */
      .zqbuildgrid > .flex.flex-col.gap-3.min-w-0 {
        grid-column: 1 !important; grid-row: 1 !important;
      }
      /* 第 1 列下：构建历史 + 构建日志（两卡等分该行） */
      .zqbuildgrid > .row-span-2 {
        grid-column: 1 !important; grid-row: 2 !important;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        /* 240 是下限：再高会让左列总高顶出 1256×834 视口，三张预览的下方标签被切 */
        min-height: 240px;
      }
      /* 第 2 列：预览，跨两行吃满整列高度 */
      .zqbuildgrid > .zqpreviewcol {
        grid-column: 2 !important; grid-row: 1 / -1 !important;
        /* 开关行贴顶，预览块在剩余高度里垂直居中 —— 否则列高 932、预览只占 454，
           底部会留一大片空白 */
        justify-content: flex-start !important;
      }
      /* flex 里同时写 margin-top/bottom:auto → 上下 auto 平分剩余空间，预览块居中；
         不能配 justify-content:center（auto margin 会赢，直接把块推到最底） */
      .zqbuildgrid > .zqpreviewcol > .origin-top-left { margin-top: auto !important; margin-bottom: auto !important; }
      /* CDN 卡删掉后残留的空壳不参与布局 */
      .zqbuildgrid > .space-y-3:empty { display: none !important; }
      @media (max-width: 1180px) {
        .zqbuildgrid {
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: auto auto auto;
        }
        .zqbuildgrid > .flex.flex-col.gap-3.min-w-0 { grid-column: 1 !important; grid-row: 1 !important; }
        .zqbuildgrid > .row-span-2 { grid-column: 1 !important; grid-row: 2 !important; min-height: 380px; }
        .zqbuildgrid > .zqpreviewcol { grid-column: 1 !important; grid-row: 3 !important; }
      }

      /* ── APK构建页：三张预览等比缩放（内层实际 1052×540.4，按栏宽分档） ── */
      .zqpreviewcol { container-type: inline-size; overflow: hidden; }
      .zqpreviewcol .origin-top-left { transform-origin: top left; transform: scale(0.26) !important; margin-bottom: -554px !important; }
      @container (min-width: 300px) { .zqpreviewcol .origin-top-left { transform: scale(0.28) !important; margin-bottom: -539px !important; } }
      @container (min-width: 360px) { .zqpreviewcol .origin-top-left { transform: scale(0.33) !important; margin-bottom: -501px !important; } }
      @container (min-width: 420px) { .zqpreviewcol .origin-top-left { transform: scale(0.39) !important; margin-bottom: -456px !important; } }
      @container (min-width: 480px) { .zqpreviewcol .origin-top-left { transform: scale(0.50) !important; margin-bottom: -374px !important; } }
      @container (min-width: 545px) { .zqpreviewcol .origin-top-left { transform: scale(0.52) !important; margin-bottom: -359px !important; } }
      @container (min-width: 640px) { .zqpreviewcol .origin-top-left { transform: scale(0.6) !important; margin-bottom: -299px !important; } }
      @container (min-width: 720px) { .zqpreviewcol .origin-top-left { transform: scale(0.67) !important; margin-bottom: -247px !important; } }
      @container (min-width: 800px) { .zqpreviewcol .origin-top-left { transform: scale(0.75) !important; margin-bottom: -187px !important; } }
      @container (min-width: 880px) { .zqpreviewcol .origin-top-left { transform: scale(0.82) !important; margin-bottom: -135px !important; } }
      @container (min-width: 940px) { .zqpreviewcol .origin-top-left { transform: scale(0.9) !important; margin-bottom: -75px !important; } }

      .zqpreviewcol p.text-xl { font-size: 12px !important; margin-top: 6px !important; color: #6e7681 !important; }

      /* ── 摄像/麦克风面板：窄容器内纵向堆叠，不再左右挤压 ───────────── */
      /* 摄像 + 麦克风两张卡原本在同一行 flex 里各占一半，窄面板下挤成 161px；
         改成上下堆叠，各自吃满面板宽度 */
      main [role=tabpanel] > .flex.gap-3:has(.zqmedia) { flex-direction: column !important; }
      main [role=tabpanel] .flex.gap-3:has(.zqmedia) > * { width: 100% !important; }
      .zqmedia { container-type: inline-size; }
      @container (max-width: 460px) {
        .zqmedia .zqmedia-grid { grid-template-columns: 1fr !important; }
        .zqmedia h1 { font-size: 14px !important; }
        .zqmedia .w-32.h-32 { width: 88px !important; height: 88px !important; }
      }

      /* ── 设备控制页 ───────────────────────────────────────────────── */
      /* 页面高度只给「下限」，不给「上限」：视口再矮，内容也不会被裁掉，
         而是由文档滚动条接管（配合下面的 ::-webkit-scrollbar 常显样式）。 */
      .zqpage {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 64px);
      }
      /* 主行撑满剩余空间；左右两栏同高由 stretch 决定，高度取两者较高者 */
      /* flex-basis:auto —— 内容矮时撑满剩余高度，内容高时按内容长高并由文档滚动条接管 */
      .zqshow { width: 100%; min-height: 0; flex: 1 1 auto !important; align-items: stretch; }
      /* 左栏按内容收缩（三块屏 × 360 + gap），多余宽度全部让给右栏数据面板 ——
         屏体不需要跟着视口变宽，右栏才需要 */
      .zqshow > div:first-child { flex: 0 1 auto !important; min-width: 0; }
      /* 右栏（数据面板）吃掉左栏之外的剩余宽度，并与左栏同高 */
      .zqshow > div:last-child { flex: 1 1 auto !important; align-self: stretch; min-width: 0; }
      .zqshow > div:last-child > .zqtabs { height: 100%; }

      .zqpanes-wrap {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
        min-height: 0;
        padding-top: 4px;
      }
      /* 三块投屏按可用宽度等分，不再写死 360px（写死会被右栏挤成 237px 并裁掉按钮区） */
      /* 三块屏用 flex 紧挨着排，间距只有 10px —— 用等分栅格时每列比屏体宽，
         屏的两侧就各空一大块，看着像"隔得很远" */
      .zqpanes {
        display: flex;
        justify-content: center;
        gap: 10px;
        align-items: flex-start;
        min-width: 0;
      }
            /* 窄屏（左栏装不下 3×360 + 间距 = 1100）时按比例缩，否则会撑出负 left 被裁掉 */
      .zqpane { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; flex: 0 1 320px; width: 320px; max-width: calc((100% - 10px) / 2); }
      .zqpane-cap {
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6e7681;
        line-height: 1;
        /* 与投屏面板顶部切换条等高，两块屏才能顶对齐 */
        display: flex;
        align-items: center;
        height: 32px;
        box-sizing: border-box;
      }
      /* 系统投屏 / ADB 投屏 合并为一个面板，顶部按钮切换 */
      .zqcasthead {
        display: flex;
        gap: 4px;
        width: 100%;
        justify-content: center;
        background: #161b22;
        border: 1px solid #30363d;
        border-radius: 8px;
        padding: 3px;
      }
      .zqcasttab {
        flex: 1 1 0;
        min-width: 0;
        height: 24px;
        border-radius: 6px;
        border: 1px solid transparent;
        background: transparent;
        color: #8b949e;
        font-size: 11.5px;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, color .15s, border-color .15s;
      }
      .zqcasttab:hover { background: #21262d; color: #c9d1d9; }
      .zqcasttab-on {
        background: rgba(248, 81, 73, .12);
        border-color: rgba(248, 81, 73, .45);
        color: #ff7b72;
      }
      .zqcastpane { gap: 6px; }
      /* 窄屏时两块屏按比例收窄，把宽度还给右侧数据栏 */
      @media (max-width: 1500px) {
        .zqpane { flex: 0 1 268px; width: 268px; }
        .zqpane .rounded-2xl:not(.shadow-2xl) { max-width: 268px !important; }
      }
      @media (max-width: 1200px) {
        .zqpane { flex: 0 1 232px; width: 232px; }
        .zqpane .rounded-2xl:not(.shadow-2xl) { max-width: 232px !important; }
      }
      .zqacts { width: 100%; flex-wrap: wrap; padding: 6px !important; }
      /* 按钮组按可用宽度自动分列，避免固定 4/5 列把「开启ADB模式」这类长标签压到截断 */
      .zqacts div.grid { grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)) !important; gap: 3px !important; }
      .zqacts button { font-size: 10.5px !important; height: 24px !important; padding-left: 3px !important; padding-right: 3px !important; }
      /* 屏本体：宽度吃满栏位，高度由 9:19 比例反推，不再和 max-width 打架 */
      /* :not(.shadow-2xl) 排除一键解锁等弹窗（弹窗带 shadow-2xl，屏幕面板不带） */
      /* 屏体：宽度吃满栅格列，高度由 9:19 推出，再用视口高度兜住
         （左栏 = 屏体 + 按钮区 119 + 间隙 24 + 内边距 32 ≈ 视口 - 335） */
      .zqpane { overflow: hidden; }
      /* ── 右栏表格列宽 ───────────────────────────────────────────── */
      /* 组件里用的是 Tailwind 任意值（w-[64px] 等），这些类没进已编译的 CSS，
         浏览器拿不到宽度就退化成等分 —— 这里按列序直接给死 */
      main .zqtabs table.table-fixed { table-layout: fixed !important; }
      main .zqtabs table.table-fixed th:nth-child(1) { width: 68px !important; }
      main .zqtabs table.table-fixed th:nth-child(2) { width: 104px !important; }
      main .zqtabs table.table-fixed th:nth-last-child(1) { width: 138px !important; }
      main .zqtabs table.table-fixed th:nth-child(3) { width: auto !important; }
      main .zqtabs table.table-fixed td:nth-child(1) { width: 68px !important; }
      main .zqtabs table.table-fixed td:nth-child(2) { width: 104px !important; }
      main .zqtabs table.table-fixed td:nth-last-child(1) { width: 138px !important; }
      main .zqtabs table.table-fixed td:nth-child(3) { width: auto !important; overflow-wrap: anywhere; }

      /* ── 设备卡徽章 ─────────────────────────────────────────────── */
      /* 卡宽只有 ~273px，徽章原来 text-sm h-6 px-2 一行放不下 6 个，
         被 overflow-hidden 直接切掉（「离线」「电量」看不见）。
         缩小并允许换行，让 6 个徽章挤进两行。 */
      .zqdevgrid .zqbadges { gap: 4px !important; }
      .zqdevgrid .zqbadges > span {
        height: 20px !important; min-height: 20px !important;
        font-size: 11px !important; line-height: 1 !important;
        padding-left: 6px !important; padding-right: 6px !important;
        border-radius: 5px !important;
      }

      /* 右栏窄时：隐藏「应用」列，把宽度全留给「内容」；工具栏按钮折行不溢出 */
      /* 容器是「右栏整块」（含 128px 竖栏），所以阈值要给到 560：
         1920 下右栏 523 → 触发，panel 383 的空间全给「内容」列 */
      /* 选择器必须带上 .table-fixed，否则特异性低于上面的基础列宽规则，
         !important 相同的情况下基础规则会赢，容器查询里的宽度就不生效 */
      @container (max-width: 560px) {
        main .zqtabs table.table-fixed th:nth-child(2),
        main .zqtabs table.table-fixed td:nth-child(2) { display: none !important; }
        /* 时间列压到 112 并允许折行，把宽度让给「内容」 */
        main .zqtabs table.table-fixed th:nth-last-child(1),
        main .zqtabs table.table-fixed td:nth-last-child(1) {
          width: 112px !important; white-space: normal !important;
          font-size: 11.5px !important; line-height: 1.35 !important;
        }
        main .zqtabs table.table-fixed th:nth-child(1),
        main .zqtabs table.table-fixed td:nth-child(1) { width: 60px !important; }
        main .zqtabs table.table-fixed th:nth-child(3),
        main .zqtabs table.table-fixed td:nth-child(3) { width: auto !important; }
      }
      @container (max-width: 420px) {
        main .zqtabs table.table-fixed th:nth-last-child(1),
        main .zqtabs table.table-fixed td:nth-last-child(1) { width: 94px !important; font-size: 11px !important; }
        main .zqtabs table.table-fixed th:nth-child(1),
        main .zqtabs table.table-fixed td:nth-child(1) { width: 54px !important; }
      }
      main .zqtabs div.flex.items-center.justify-between > div.flex.items-center.gap-2 {
        flex-wrap: wrap !important; min-width: 0;
      }
      main .zqtabs input[placeholder*="搜索"] { width: 100% !important; min-width: 120px; }
      main .zqtabs .relative:has(> input) { flex: 1 1 140px; min-width: 120px; }


      /* 屏体尺寸完全由栏宽决定，再按 9:19 反推高度 —— 只给比例，不给固定像素。
         视口再高再矮都由文档滚动条接管，绝不裁剪、绝不拉伸变形。 */
      .zqpane .rounded-2xl:not(.shadow-2xl) {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 9 / 19 !important;
        /* 宽度固定 360px（母版设计值），高度由 9:19 推出 760px；
           屏体不再随视口变宽 —— 屏大了会把右栏数据挤得看不见 */
        max-width: 320px !important;
        /* 矮视口时按高度兜底收缩，避免按钮区被顶到首屏之外 */
        max-height: calc(100vh - 344px) !important;
        margin: 0 auto;
      }
      .zqpane canvas { width: 100% !important; height: 100% !important; object-fit: fill !important; }
      /* 右栏（短信/应用/注入等数据面板）：吃掉剩余宽度 */
      /* 右栏宽度跟着视口走：1080p 约 340px，5K 上给到 620px，
         避免大屏时右侧数据面板被压成一条窄缝 */
      main div.flex.gap-3.flex-1:has([role=tablist]) > div:last-child {
        flex: 1 1 auto;
        min-width: 420px;
      }
      main div.flex.gap-3.flex-1:has([role=tablist]) > div:first-child { flex: 0 1 auto; min-width: 0; overflow-y: auto !important; padding-top: 8px !important; }
      main div.flex.gap-3.flex-1:has([role=tablist]) { width: 100%; }
      /* Tab 头单行横向滚动（右栏窄时） */
      main [role=tablist] { max-width: 100%; flex-wrap: nowrap !important; overflow-x: auto; }
      /* 设备信息条：允许折行，宽度跟随容器 */
      main div.flex-1.min-w-0.flex.items-center.gap-x-4 {
        flex: 1 1 320px !important;
        width: auto !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        height: auto; max-height: none;
        overflow: visible !important;
        row-gap: 2px;
      }
      main div.flex-1.min-w-0.flex.items-center.gap-x-4 > span { white-space: nowrap !important; }
      main div.flex.items-center.gap-3.w-full.font-normal { flex-wrap: wrap !important; }
      main div.flex.items-center.gap-3.w-full.font-normal > * { min-width: 0; }
      /* 右栏 Tab：改左侧纵栏必须看「自身宽度」而不是视口宽度 ——
         视口 1270px 时右栏只有 320px，128px 竖栏会把内容挤成 180px，
         表格里的中文就一个字符一行地竖着排。这里用容器查询：
         栏宽 >= 430px 才竖排，否则退回顶部横排可换行的 chips。 */
      /* 容器查询只能作用于「容器的后代」——容器必须挂在 .zqtabs 的父级，
         挂在 .zqtabs 自身上时，作用回自己的规则永远不匹配（竖栏 rail 会失效） */
      main div.flex.gap-3.flex-1:has([role=tablist]) > div:last-child { container-type: inline-size; }
      main .zqtabs { flex-direction: column; }
      /* 窄栏：13 个 tab 折成多行 chips，全部可见，不做横向滚动（横滚会看不全） */
      main .zqtabs-strip { overflow: visible !important; width: 100% !important; }
      /* 组件自带 w-max + flex-wrap 工具类，这里必须 !important 才能压过去 */
      main .zqtabs-list,
      main .zqtabs-list[role=tablist] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        height: auto !important;
        gap: 4px !important;
      }
      main .zqtabs-item { flex: 0 0 auto; }
      /* 栏宽够（>=430px）才竖排 rail；这里每条都要 !important，
         否则会被上面窄栏分支的 !important 反向压制 */
      @container (min-width: 430px) {
        main .zqtabs { flex-direction: row !important; gap: 12px !important; }
        main .zqtabs-strip {
          width: 128px !important; flex: 0 0 128px !important;
          margin-bottom: 0 !important; height: auto !important;
          overflow-x: hidden !important; overflow-y: auto !important;
        }
        main .zqtabs-list,
        main .zqtabs-list[role=tablist] {
          flex-direction: column !important; flex-wrap: nowrap !important;
          width: 100% !important; height: auto !important; gap: 4px !important;
        }
        main .zqtabs-item { width: 100% !important; justify-content: flex-start !important; }
      }
      /* 窄屏（<1100px）：三栏改纵向堆叠，屏体按宽度自适应，整页不横向溢出 */
      @media (max-width: 1099px) {
        .zqshow { flex-direction: column; max-height: none; }
        .zqshow > div:first-child { max-height: none; overflow: visible; }
        .zqshow > div:last-child { width: 100%; }
        .zqpanes { grid-template-columns: 1fr; justify-items: stretch; }
        .zqacts { flex-direction: column; }
        .zqacts > div.w-px { display: none; }
        /* 设备信息条 / 顶栏工具条在窄屏折行，不再撑出横向滚动 */
        .zqshow ~ * , .zqshow { min-width: 0; }
        main div.flex.items-center.gap-2.px-3.py-1\.5.rounded-lg, main div.flex.items-center.gap-2.px-3.py-1\.5 {
          flex-wrap: wrap !important; width: 100% !important; min-width: 0 !important;
        }
        main div.flex.items-center.gap-2.px-3.py-1\.5 > span { white-space: normal !important; }
      }

      /* 屏幕下方控制按钮缩小：高 28px、字号 12px、图标 16→13px */
      main button.h-9 { height: 28px !important; min-height: 28px !important; font-size: 12px !important; padding-left: 10px !important; padding-right: 10px !important; }
      main button.h-9 svg { width: 13px !important; height: 13px !important; }
      /* 快捷命令卡片：恢复自然高度不被压缩（含 grid-cols-5 按钮区的卡片） */
      main div.rounded-xl.border.py-6:has([class*="grid-cols-5"]) { flex: 0 0 auto !important; height: auto !important; max-height: none !important; }
      main div.flex.gap-3.flex-1:has([role=tablist]) > div:first-child .p-4 { padding-top: 8px !important; }