/**
 * 「浏览器环境」列表 —— 代理这一列的排版修复（2026-09-19）
 *
 * 现象（客户截图）：
 *   1) 代理列只有 ~142px，可用内容层却是 160~176px：S 类型徽标 + IP + 「快捷设置代理」铅笔挤在一行，
 *      外层还写了 min-w-[160px]，于是被单元格的 overflow:hidden 从两头裁掉 —— 徽标/铅笔只露出一半；
 *   2) 没绑代理的行是「未绑定」在上、铅笔在下；绑了代理的行是铅笔跟在 IP 后面，
 *      两种行按钮位置不对称，看着很乱；
 *   3) 窗口不放大时，最左边的 S 徽标会被挤出可视区。
 *
 * 方案（客户指定的对齐方式）：
 *   第一行：IP（未绑定时是「未绑定」）居中；
 *   第二行：[S 类型徽标] 国家 [铅笔按钮] —— 徽标落在 IP 开头的正下方，铅笔落在 IP 结尾的正下方，
 *   未绑定行的铅笔和已绑定行对齐，所有宽度改成 100%，彻底不溢出。
 */

/* 两种结构都命中：未绑定是 div > button，已绑定是 div > div > (span+span+button) */
td > .flex.flex-col:has(> button[title="快捷设置代理"]),
td > .flex.flex-col:has(> div > button[title="快捷设置代理"]) {
  display: grid !important;
  /* 24(徽标) + 中间自适应 + 30(铅笔) + 2×2 间隙 —— 代理列内容区只有 ~110px，
     这样中间还能留 ~52px，放得下"澳大利亚"这种 4 字地区名 */
  grid-template-columns: 24px minmax(0, 1fr) 30px;
  align-items: center;
  justify-items: center;
  column-gap: 2px;
  row-gap: 2px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* 快捷设置代理按钮：和类型徽标等高，别一大一小 */
td > .flex.flex-col:has(> button[title="快捷设置代理"]) > button[title="快捷设置代理"],
td > .flex.flex-col:has(> div > button[title="快捷设置代理"]) > div:first-child > button[title="快捷设置代理"] {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

/* 已绑定：把内层那一行打散，让三个元素直接参与外层网格（DOM 不动，纯视觉重排） */
td > .flex.flex-col:has(> div > button[title="快捷设置代理"]) > div:first-child {
  display: contents !important;
}

/* 第一行：IP 横跨整格居中 */
td > .flex.flex-col:has(> div > button[title="快捷设置代理"]) > div:first-child > span.truncate {
  grid-row: 1;
  grid-column: 1 / -1;
  max-width: 100%;
  text-align: center;
}

/* 第二行左侧：类型徽标（S / H / S5 等）
   注意：IP 那个 span 也带 title（title=IP 本身），所以必须排除掉 .truncate，否则会被抢到左边 */
td > .flex.flex-col:has(> div > button[title="快捷设置代理"]) > div:first-child > span[title]:not(.truncate) {
  grid-row: 2;
  grid-column: 1;
}

/* 第二行右侧：快捷设置代理 */
td > .flex.flex-col:has(> div > button[title="快捷设置代理"]) > div:first-child > button[title="快捷设置代理"] {
  grid-row: 2;
  grid-column: 3;
}

/* 第二行中间：国家 / 地区 */
td > .flex.flex-col:has(> div > button[title="快捷设置代理"]) > div.max-w-\[200px\] {
  grid-row: 2;
  grid-column: 2;
  max-width: 100%;
  text-align: center;
}

/* 未绑定：文字第一行居中，铅笔第二行右侧（与已绑定行对齐） */
td > .flex.flex-col:has(> button[title="快捷设置代理"]) > span {
  grid-row: 1;
  grid-column: 1 / -1;
  text-align: center;
}

td > .flex.flex-col:has(> button[title="快捷设置代理"]) > button[title="快捷设置代理"] {
  grid-row: 2;
  grid-column: 3;
}