/* 这里随便写自定义css样式 */

/* ===== 快速导入：mihomo / Loon 按钮 ===== */

/* mihomo 沿用 Clash 的深蓝底色 */
.import-btns .btn-mihomo {
  background: linear-gradient(90deg, #152e52, #152e52) !important;
  color: #fff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(14, 31, 57, .749) !important;
}

/* Loon 用青蓝色，和其它按钮区分 */
.import-btns .btn-loon {
  background: linear-gradient(90deg, #0e7490, #0891b2) !important;
  color: #fff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(8, 145, 178, .65) !important;
}

/* FlClash 靛蓝 */
.import-btns .btn-flclash {
  background: linear-gradient(90deg, #4263eb, #3b5bdb) !important;
  color: #fff !important; border: none !important; border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(66, 99, 235, .5) !important;
}
/* Clash Verge 粉紫 */
.import-btns .btn-verge {
  background: linear-gradient(90deg, #e07cc8, #9d7cf0) !important;
  color: #fff !important; border: none !important; border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(157, 124, 240, .5) !important;
}
/* Nekobox 青色 */
.import-btns .btn-nekobox {
  background: linear-gradient(90deg, #15aabf, #0c8599) !important;
  color: #fff !important; border: none !important; border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(21, 170, 191, .5) !important;
}
/* Stash 翠绿 */
.import-btns .btn-stash {
  background: linear-gradient(90deg, #10b981, #0d9488) !important;
  color: #fff !important; border: none !important; border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(16, 185, 129, .5) !important;
}

/* 白色单色图标：用 mask + currentColor 跟随按钮白字 */
.import-btns .btn .metron-mihomo,
.import-btns .btn .metron-loon,
.import-btns .btn .metron-flclash,
.import-btns .btn .metron-verge,
.import-btns .btn .metron-nekobox,
.import-btns .btn .metron-stash {
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: .35rem;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.import-btns .btn .metron-mihomo {
  -webkit-mask-image: url(img/mihomo.svg);
  mask-image: url(img/mihomo.svg);
}
.import-btns .btn .metron-loon {
  -webkit-mask-image: url(img/loon.svg);
  mask-image: url(img/loon.svg);
}
.import-btns .btn .metron-flclash {
  -webkit-mask-image: url(img/flclash.svg);
  mask-image: url(img/flclash.svg);
}
.import-btns .btn .metron-stash {
  -webkit-mask-image: url(img/stash.svg);
  mask-image: url(img/stash.svg);
}
.import-btns .btn .metron-verge {
  -webkit-mask-image: url(img/verge.svg);
  mask-image: url(img/verge.svg);
}
.import-btns .btn .metron-nekobox {
  -webkit-mask-image: url(img/nekobox.svg);
  mask-image: url(img/nekobox.svg);
}

/* ===== 快速导入：左右对齐自适应布局（每行均分，两端对齐），高度自适应不裁剪 ===== */
.subscribe-info .import-btns,
.import-btns {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  align-content: flex-start;
  height: auto !important;
  overflow: visible !important;
  padding-top: 20px !important;
}
.import-btns .btn {
  flex: 1 1 calc(50% - 7px);
  min-width: 140px;
  margin: 0 !important;
  font-size: 13px !important;
  padding: 0 10px !important;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 统一所有图标：同一个 20px 居中方盒，字体图标与 mask 图标视觉一致 */
.import-btns .btn i,
.import-btns .btn .icon {
  font-size: 18px !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: .3rem !important;
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}
.import-btns .btn .metron-mihomo,
.import-btns .btn .metron-loon,
.import-btns .btn .metron-flclash,
.import-btns .btn .metron-verge,
.import-btns .btn .metron-nekobox,
.import-btns .btn .metron-stash {
  width: 20px !important;
  height: 20px !important;
}
/* 客户端下载行：单独一排、从左到右、不居中、可扩展换行 */
.subscribe-info .client-links {
  height: auto !important;
  justify-content: flex-start !important;
  gap: 6px 4px;
  margin-top: 12px !important;
  border-top: 1px solid rgba(0, 0, 0, .06);
  padding-top: 14px !important;
}
.subscribe-info .client-links .link-item {
  width: 78px !important;
}

/* ===== 快速导入按钮：悬停上浮+微放大动效（transform 不影响相邻按钮布局） ===== */
.import-btns .btn {
  position: relative;
  transition: transform .24s cubic-bezier(.2, .7, .3, 1), box-shadow .24s ease, filter .24s ease !important;
  will-change: transform;
}
.import-btns .btn:hover {
  transform: translateY(-6px) scale(1.04);
  z-index: 6;               /* 放大的按钮浮于相邻之上，避免重叠错位 */
  filter: brightness(1.07) saturate(1.05);
  box-shadow: 0 16px 34px rgba(31, 45, 61, .3), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.import-btns .btn:active {
  transform: translateY(-2px) scale(1.01);
}

/* ===== 流量明细：柱状+折线图 ===== */
.flow-container .flow-chart {
  height: 320px;
  padding: 16px 12px 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fff;
}
.is-darkmode .flow-container .flow-chart {
  background: #1f1f1f;
}

/* ===== 使用文档：缩小标题，正文更紧凑可读 ===== */
.doc-content .title {
  font-size: 18px !important;
  text-align: left !important;
  margin: 4px 0 12px !important;
}
.doc-content .html {
  padding: 12px 18px 50px !important;
}
.markdown-container {
  font-size: 14px !important;
}
.markdown-container h1 { font-size: 19px !important; margin: 16px 0 10px !important; line-height: 1.4 !important; }
.markdown-container h2 { font-size: 16px !important; margin: 14px 0 8px !important; line-height: 1.4 !important; }
.markdown-container h3 { font-size: 14px !important; margin: 12px 0 6px !important; line-height: 1.4 !important; }
.markdown-container h4 { font-size: 13px !important; margin: 10px 0 6px !important; }

/* ===== 侧边栏 logo：字号调小、与图标对齐协调（比内容字体大约 2 号 ~18px） ===== */
.layout-container .menu-logo {
  font-size: 18px !important;
  padding: 16px 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-container .menu-logo > span {
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1;
}
.layout-container .menu-logo img {
  width: 26px !important;
  height: 26px;
  margin-right: 8px !important;
  object-fit: contain;
}
/* 折叠态下 logo 居中、隐藏文字（沿用主题既有折叠逻辑） */
.layout-container.is-collapse .menu-logo img {
  margin-right: 0 !important;
}

/* ===================================================================
   登录 / 认证页：深色科技风 + 点阵世界地图 + 玻璃登录框
   =================================================================== */
.auth-container {
  background:
    radial-gradient(900px 520px at 22% 30%, rgba(47, 123, 255, .22), transparent 62%),
    radial-gradient(700px 500px at 85% 80%, rgba(99, 102, 241, .16), transparent 60%),
    linear-gradient(135deg, #070f20 0%, #0b1f3a 48%, #070f20 100%) !important;
}

/* 左侧：点阵世界地图面板（隐藏原火箭与文字） */
.auth-container .left-img .img,
.auth-container .left-img .txt { display: none !important; }
.auth-container .left-img .warp {
  background:
    url(img/worldmap.svg) center center / 92% auto no-repeat,
    radial-gradient(520px 360px at 50% 46%, rgba(56, 132, 255, .20), transparent 70%) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 16px;
}

/* 右侧：玻璃拟态登录卡片 */
.auth-container .right-form { background: transparent !important; }
.auth-container .right-form .wrapper {
  background: rgba(255, 255, 255, .055) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 46px 40px !important;
  width: 100% !important;
  max-width: 430px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

/* 站点名（Oneman）移到账号登录上方 */
.auth-container .right-form .brand-name {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.1;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #5b9dff, #9ecbff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #9ecbff;
}

.auth-container .right-form .title {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 600 !important;
}
.auth-container .right-form .title b {
  display: block;
  margin-top: 6px;
  font-size: 14px !important;
  color: rgba(255, 255, 255, .5) !important;
}
/* 注册提示彻底隐藏（自用，模板已移除，这里兜底） */
.auth-container .right-form .tip { display: none !important; }

.auth-container .right-form .ant-form-item-label label {
  color: rgba(255, 255, 255, .75) !important;
}

/* 深色半透明输入框 */
.auth-container .right-form .input,
.auth-container .right-form .ant-input-affix-wrapper {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.auth-container .right-form .input .ant-input,
.auth-container .right-form .ant-input {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
}
.auth-container .right-form input::-webkit-input-placeholder { color: rgba(255, 255, 255, .4) !important; }
.auth-container .right-form input::placeholder { color: rgba(255, 255, 255, .4) !important; }
.auth-container .right-form .ant-input-clear-icon,
.auth-container .right-form .ant-input-affix-wrapper .anticon { color: rgba(255, 255, 255, .45) !important; }
.auth-container .right-form .input:focus-within,
.auth-container .right-form .ant-input-affix-wrapper-focused {
  border-color: rgba(95, 157, 255, .8) !important;
  box-shadow: 0 0 0 2px rgba(47, 123, 255, .25) !important;
}

.auth-container .right-form .blu { color: #7db4ff !important; }
.auth-container .right-form .agree { color: rgba(255, 255, 255, .6) !important; }
.auth-container .right-form .lang { color: rgba(255, 255, 255, .6) !important; }

/* 登录按钮：渐变 + 辉光 */
.auth-container .right-form .btn {
  background: linear-gradient(90deg, #2f7bff, #4f9bff) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(47, 123, 255, .42) !important;
}
.auth-container .right-form .btn:hover {
  background: linear-gradient(90deg, #3d87ff, #62a8ff) !important;
}

/* ===================================================================
   登录页 v2：地图全屏居中铺满 + 登录框居中 + 近黑炭灰底 + 青色科技 + 强毛玻璃
   （后置覆盖上面的 v1）
   =================================================================== */
.auth-container {
  position: relative !important;
  background:
    radial-gradient(1000px 640px at 50% 38%, rgba(56, 189, 248, .10), transparent 62%),
    linear-gradient(140deg, #2b3c50 0%, #35495f 50%, #2b3c50 100%) !important;
}
/* 网络互联科技网格：铺满整页作底 */
.auth-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(img/network.svg) center center / cover no-repeat;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
/* 隐藏左侧旧 panel，让登录框在整页居中 */
.auth-container .left-img { display: none !important; }
.auth-container .auth-box {
  width: 100%;
  height: 100vh;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  z-index: 1;
}
.auth-container .right-form {
  flex: 1 1 auto !important;
  height: 100vh !important;
  padding: 0 24px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 强毛玻璃登录卡片（透出模糊地图） */
.auth-container .right-form .wrapper {
  width: 100% !important;
  max-width: 420px;
  padding: 44px 38px !important;
  background: rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* 品牌名：云朵 logo + 站点名，纯白可见（去渐变） */
.auth-container .right-form .brand-name {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 18px;
}
.auth-container .right-form .brand-name::before {
  content: "";
  width: 64px;
  height: 64px;
  flex: none;
  background: url(../favicon.svg) center / contain no-repeat;
  filter: drop-shadow(0 4px 14px rgba(56, 189, 248, .45));
}
/* 标题栏居中 */
.auth-container .right-form .title { text-align: center !important; }
.auth-container .right-form > .a-form-model .wrapper > .title,
.auth-container .right-form .wrapper > .title { text-align: center !important; }

/* 输入框：深色半透明（彻底盖掉白底），白字 */
.auth-container .right-form .ant-input-affix-wrapper,
.auth-container .right-form .input,
.auth-container .right-form .input .ant-input,
.auth-container .right-form .ant-input {
  background-color: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
.auth-container .right-form .ant-input-affix-wrapper,
.auth-container .right-form .input {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.auth-container .right-form .ant-input { border: none !important; }
.auth-container .right-form input::placeholder { color: rgba(255, 255, 255, .42) !important; }
.auth-container .right-form .ant-input-clear-icon,
.auth-container .right-form .ant-input-suffix .anticon { color: rgba(255, 255, 255, .5) !important; }
.auth-container .right-form .input:focus-within,
.auth-container .right-form .ant-input-affix-wrapper:focus,
.auth-container .right-form .ant-input-affix-wrapper-focused {
  border-color: rgba(34, 211, 238, .8) !important;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .22) !important;
}

/* 链接 + 登录按钮：青色科技 */
.auth-container .right-form .blu,
.auth-container .right-form .lang { color: #5fdcec !important; }
.auth-container .right-form .btn {
  background: linear-gradient(135deg, #0e7490, #06b6d4 60%, #22d3ee) !important;
  box-shadow: 0 12px 30px rgba(8, 145, 178, .45) !important;
}
.auth-container .right-form .btn:hover {
  background: linear-gradient(135deg, #0e8aa8, #0bc5dd 60%, #38dcee) !important;
}

/* ===================================================================
   登录页 v3：白色简约风（后置覆盖 v2 深色）
   =================================================================== */
.auth-container {
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(59, 130, 246, .06), transparent 60%),
    linear-gradient(135deg, #eef3f9 0%, #f7fafd 50%, #eef3f9 100%) !important;
}
.auth-container::before {
  background: url(img/network-light.svg) center center / cover no-repeat !important;
  opacity: .9 !important;
}
/* 白色卡片 + 柔和阴影（去毛玻璃） */
.auth-container .right-form .wrapper {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(31, 45, 61, .07) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(31, 45, 61, .14) !important;
}
/* 文字转深色 */
.auth-container .right-form .brand-name {
  color: #1f2d3d !important;
  -webkit-text-fill-color: #1f2d3d !important;
}
.auth-container .right-form .title { color: #1f2d3d !important; }
.auth-container .right-form .title b { color: #97a4b2 !important; }
.auth-container .right-form .ant-form-item-label label { color: #56657a !important; }
/* 浅色输入框 */
.auth-container .right-form .ant-input-affix-wrapper,
.auth-container .right-form .input,
.auth-container .right-form .input .ant-input,
.auth-container .right-form .ant-input {
  background-color: #f3f6fa !important;
  color: #1f2d3d !important;
}
.auth-container .right-form .ant-input-affix-wrapper,
.auth-container .right-form .input {
  border: 1px solid #e3e9f1 !important;
}
.auth-container .right-form input::placeholder { color: #aab4c0 !important; }
.auth-container .right-form .ant-input-clear-icon,
.auth-container .right-form .ant-input-suffix .anticon { color: #aab4c0 !important; }
.auth-container .right-form .input:focus-within,
.auth-container .right-form .ant-input-affix-wrapper-focused {
  border-color: #4f9bff !important;
  box-shadow: 0 0 0 2px rgba(47, 123, 255, .18) !important;
}
/* 链接 + 按钮：简约蓝 */
.auth-container .right-form .blu,
.auth-container .right-form .lang { color: #2f7bff !important; }
.auth-container .right-form .btn {
  background: linear-gradient(135deg, #2f7bff, #4f9bff) !important;
  box-shadow: 0 12px 28px rgba(47, 123, 255, .32) !important;
}
.auth-container .right-form .btn:hover {
  background: linear-gradient(135deg, #3d87ff, #62a8ff) !important;
}

/* ===== 使用文档：左侧列表缩小 + 右侧内容加内边距 ===== */
/* 左侧目录：缩小条目字号和图标 */
.knowledge-container .doc-dir .ant-timeline-item {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.knowledge-container .doc-dir .ant-timeline-item .svg-icon {
  font-size: 14px !important;
  vertical-align: middle !important;
}
/* 顶部 tab 标签：缩小图标和字号 */
.knowledge-container .doc-tabs .ant-tabs-nav-container {
  font-size: 14px !important;
}
.knowledge-container .doc-tabs .ant-tabs-tab .svg-icon {
  font-size: 16px !important;
  vertical-align: middle !important;
}
/* 左侧目录：减少顶部留白 */
.knowledge-container .doc-dir {
  padding: 20px 16px 8px !important;
}
/* 右侧内容：加四周内边距，让正文呼吸 */
.knowledge-container .doc-content {
  padding: 24px 28px !important;
}
/* 右侧正文：外层已有内边距，去掉内层多余横向间距 */
.knowledge-container .doc-content .html {
  padding: 8px 0 60px !important;
}
/* 右侧标题：与正文对齐（左对齐 + 下分割线） */
.knowledge-container .doc-content .title {
  font-size: 17px !important;
  text-align: left !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

/* ===== 使用文档：左侧列表缩小 + 右侧内容加内边距 ===== */
/* 左侧目录：缩小条目字号和图标 */
.knowledge-container .doc-dir .ant-timeline-item {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.knowledge-container .doc-dir .ant-timeline-item .svg-icon {
  font-size: 14px !important;
  vertical-align: middle !important;
}
/* 顶部 tab：缩小图标和字号 */
.knowledge-container .doc-tabs .ant-tabs-nav-container {
  font-size: 14px !important;
}
.knowledge-container .doc-tabs .ant-tabs-tab .svg-icon {
  font-size: 16px !important;
  vertical-align: middle !important;
}
/* 左侧目录：减少顶部留白 */
.knowledge-container .doc-dir {
  padding: 20px 16px 8px !important;
}
/* 右侧内容：加四周内边距，让正文呼吸 */
.knowledge-container .doc-content {
  padding: 24px 28px !important;
}
/* 右侧正文：外层已有内边距，去掉内层多余横向间距 */
.knowledge-container .doc-content .html {
  padding: 8px 0 60px !important;
}
/* 右侧标题：左对齐 + 下分割线 */
.knowledge-container .doc-content .title {
  font-size: 17px !important;
  text-align: left !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}


/* ===================================================================
   ===  SINGBOX + LAYOUT OVERRIDES (2026-05-27)  ===
   =================================================================== */

/* === 1. 互换：我的订阅（col-1）在左，快速导入（col-2）在右 === */
.subscribe-info.is-reverse {
  flex-direction: row !important;
}

/* === 2. 快速导入列宽固定、我的订阅自适应（保持原有宽度设定）=== */
/* col-1 已是 flex:1 (我的订阅)，col-2 已是 width:490px (快速导入) */
/* 互换方向后自然正确，无需额外改动 */

/* === 3. 订阅按钮改为每行 3 个 === */
.import-btns .btn {
  flex: 1 1 calc(33.33% - 10px) !important;
  min-width: 108px !important;
  padding: 0 8px !important;
  height: 36px !important;
  font-size: 12.5px !important;
}

/* === 4. import-btns 容器内间距收紧 === */
.subscribe-info .import-btns,
.import-btns {
  gap: 10px !important;
  padding-top: 14px !important;
}

/* === 5. 我的订阅（col-1）紧凑化 === */
.subscribe-info .col-1 .panel-header {
  padding: 14px 18px 10px !important;
}
.subscribe-info .col-1 .subs-box {
  padding: 14px 16px !important;
}
.subscribe-info .col-1 .subs-msg .t1 {
  font-size: 15px !important;
  margin-bottom: 4px !important;
}
.subscribe-info .col-1 .subs-msg .t2 {
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.subscribe-info .col-1 .subs-msg .t2.re {
  font-size: 12px !important;
}
.subscribe-info .col-1 .ant-progress {
  margin: 8px 0 4px !important;
}
.subscribe-info .col-1 .flow-num {
  font-size: 12px !important;
}
.subscribe-info .col-1 .subs-ops {
  margin-top: 10px !important;
  gap: 8px !important;
}
.subscribe-info .col-1 .subs-ops .ant-btn {
  height: 30px !important;
  font-size: 12px !important;
  padding: 0 12px !important;
}

/* === 6. SingBox 按钮颜色 (紫色) === */
.import-btns .btn-singbox {
  background: linear-gradient(90deg, #7c3aed, #6d28d9) !important;
  color: #fff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(109, 40, 217, .5) !important;
  cursor: pointer;
}
.import-btns .btn-singbox:hover {
  filter: brightness(1.08) saturate(1.06);
}

/* === 7. SingBox 图标（mask 模式，颜色跟随按钮白色文字）=== */
.import-btns .btn .metron-singbox {
  -webkit-mask-image: url(img/singbox.svg);
  mask-image: url(img/singbox.svg);
}


/* ===================================================================
   === FIXES-B 2026-05-27 ===
   =================================================================== */

/* 1. 按钮强制 flex 居中（chunk CSS 动态加载会覆盖，加 !important） */
.import-btns .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;  /* 取消原 44px line-height 干扰 */
}

/* 2. SingBox 图标完整属性（SVG mask 模式，不是 metron 字体）*/
.import-btns .btn .metron-singbox {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: .3rem !important;
  flex: none !important;
  background-color: currentColor !important;   /* 关键：让 mask 显示为白色 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(img/singbox.svg) !important;
  mask-image: url(img/singbox.svg) !important;
  vertical-align: middle;
  /* 取消 metron 字体干扰 */
  font-family: inherit !important;
  font-size: 0 !important;
}

/* 3. 我的订阅（col-1）缩窄固定宽度，快速导入（col-2）占剩余 */
.subscribe-info .col-1 {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  min-width: 0 !important;
}
.subscribe-info .col-2 {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* 4. import-btns 高度自适应（确保覆盖 chunk CSS 的 height:300px）*/
.subscribe-info .import-btns {
  height: auto !important;
  overflow: visible !important;
  padding-top: 14px !important;
}

/* 5. 同样修复其他 SVG mask 图标（防 chunk CSS 覆盖 display）*/
.import-btns .btn .metron-mihomo,
.import-btns .btn .metron-loon,
.import-btns .btn .metron-flclash,
.import-btns .btn .metron-verge,
.import-btns .btn .metron-nekobox,
.import-btns .btn .metron-stash {
  display: inline-block !important;
  background-color: currentColor !important;
  flex: none !important;
  font-family: inherit !important;
  font-size: 0 !important;
}

/* ===================================================================
   === PROPORTION-FIX 2026-05-27 ===
   =================================================================== */

/* 覆盖之前 300px / flex:1 的极端比例
   col-1 我的订阅 固定 380px，col-2 快速导入 固定 560px
   两者加 30px spacer = 970px，居中在页面上不溢出 */
.subscribe-info .col-1 {
  flex: 0 0 380px !important;
  width: 380px !important;
  max-width: 380px !important;
  min-width: 0 !important;
}
.subscribe-info .col-2 {
  flex: 0 0 560px !important;
  width: 560px !important;
  max-width: 560px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* 按钮 3 列在 560px 容器里：(560 - 2*10) / 3 ≈ 180px，合适 */
.import-btns .btn {
  flex: 1 1 calc(33.33% - 8px) !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* ===================================================================
   === RATIO-FIX 2026-05-27 ===
   我的订阅 2/3，快速导入 1/3
   =================================================================== */
.subscribe-info .col-1 {
  flex: 2 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.subscribe-info .col-2 {
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* 快速导入按钮字体恢复原始大小 */
.import-btns .btn {
  font-size: 1rem !important;
  height: 42px !important;
  padding: 0 10px !important;
}

/* ===================================================================
   === FONT-FIX 2026-05-27: 恢复 subs-msg 原始字号 ===
   =================================================================== */
.subscribe-info .col-1 .subs-msg .t1 {
  font-size: 20px !important;
  margin-bottom: 20px !important;
}
.subscribe-info .col-1 .subs-msg .t2 {
  font-size: 18px !important;
  line-height: inherit !important;
  height: auto !important;
}

/* ===================================================================
   === RATIO2-FIX 2026-05-27: 3/5 vs 2/5 ===
   =================================================================== */
.subscribe-info .col-1 {
  flex: 3 1 0% !important;
}
.subscribe-info .col-2 {
  flex: 2 1 0% !important;
}

/* === RATIO3: 3/7 vs 4/7 === */
.subscribe-info .col-1 { flex: 3 1 0% !important; }
.subscribe-info .col-2 { flex: 4 1 0% !important; }

/* === RATIO4: col-1(我的订阅) 4/7, col-2(快速导入) 3/7 === */
.subscribe-info .col-1 { flex: 4 1 0% !important; }
.subscribe-info .col-2 { flex: 3 1 0% !important; }

/* === SUBS-BTNS-SPACING: push 购买订阅/查看教程 buttons down === */
.subscribe-info .col-1 .subs-btns {
  margin-top: 20px !important;
}

/* === BTN-CENTER: 购买订阅/查看教程 vertically centered in col-1 === */
.subscribe-info .col-1 .subs-msg {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.subscribe-info .col-1 .subs-btns {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* === BTN-CENTER-FIX: revert broken height:100%, center via subs-box flex === */
.subscribe-info .col-1 .subs-msg {
  display: block !important;
  height: auto !important;
}
.subscribe-info .col-1 .subs-btns {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* subs-box is the card; make it flex-column so remaining space after subs-msg goes to btns wrapper */
.subscribe-info .col-1 .subs-box {
  display: flex !important;
  flex-direction: column !important;
}
/* subs-btns grows into remaining space and centers buttons vertically */
.subscribe-info .col-1 .subs-btns {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* === MOBILE-FIX: responsive layout for small screens === */
@media (max-width: 900px) {
  /* stack col-1 and col-2 vertically */
  .subscribe-info {
    flex-direction: column !important;
  }
  .subscribe-info .col-1,
  .subscribe-info .col-2 {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2 buttons per row on medium screens */
  .import-btns .btn {
    flex: 1 1 calc(50% - 8px) !important;
    font-size: 0.9rem !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 480px) {
  /* 2 per row on phones, smaller font */
  .import-btns .btn {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 0.8rem !important;
    height: 38px !important;
    padding: 0 6px !important;
  }
  /* ensure subs-btns wrap nicely */
  .subscribe-info .col-1 .subs-btns {
    flex-wrap: wrap !important;
  }
}

/* === CHART-WIDTH: fill full width regardless of sidebar state === */
.mysubs-container,
.mysubs-container .panel-box,
.mysubs-container .ant-table,
.mysubs-container canvas {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile: reduce horizontal padding so chart fills screen */
@media (max-width: 768px) {
  .mysubs-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mysubs-container .panel-box {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* === NODE-FILTER: trigger button + modal === */
.nf-trigger { margin-bottom: 10px; }
.nf-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%; padding: 9px 14px;
  border: 1px solid var(--el-border-color, #dcdfe6); border-radius: 8px;
  background: var(--el-fill-color-blank, #fff);
  color: var(--el-text-color-primary, #303133);
  font-size: 14px; cursor: pointer; text-align: left; transition: border-color .2s;
}
.nf-trigger-btn:hover { border-color: var(--el-color-primary, #409eff); }
.nf-trig-icon { font-size: 15px; }
.nf-trig-sum {
  flex: 1; font-size: 12px; color: var(--el-text-color-secondary, #909399); text-align: right;
}

/* Overlay */
.nf-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); padding: 16px;
}
/* Modal card */
.nf-modal {
  background: var(--el-bg-color, #fff); border-radius: 12px;
  width: 100%; max-width: 560px; max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
/* Header */
.nf-modal-hd {
  display: flex; align-items: center; padding: 16px 20px 12px;
  border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5); flex-shrink: 0;
}
.nf-modal-title { flex: 1; font-size: 17px; font-weight: 600; color: var(--el-text-color-primary, #303133); }
.nf-modal-x {
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px;
  color: var(--el-text-color-secondary, #909399); border-radius: 4px;
}
.nf-modal-x:hover { background: var(--el-fill-color, #f0f2f5); color: var(--el-text-color-primary, #303133); }
/* Body */
.nf-modal-bd { flex: 1; overflow-y: auto; padding: 16px 20px; }
/* Footer */
.nf-modal-ft {
  display: flex; gap: 12px; justify-content: space-around;
  padding: 14px 20px; border-top: 1px solid var(--el-border-color-lighter, #ebeef5); flex-shrink: 0;
}
.nf-modal-ft .nf-fbtn { flex: 0 0 auto; width: 26%; }
/* Action buttons */
.nf-fbtn {
  padding: 8px 26px; border-radius: 6px; font-size: 14px; cursor: pointer; border: 1px solid transparent;
}
.nf-fbtn-cancel {
  background: var(--el-fill-color, #f0f2f5); border-color: var(--el-border-color, #dcdfe6);
  color: var(--el-text-color-regular, #606266);
}
.nf-fbtn-cancel:hover { background: var(--el-fill-color-dark, #e6e8eb); }
.nf-fbtn-ok { background: var(--el-color-primary, #409eff); color: #fff; }
.nf-fbtn-ok:hover { background: var(--el-color-primary-dark-2, #337ecc); }
/* Section labels */
.nf-sec-label { font-size: 14px; font-weight: 600; color: var(--el-text-color-primary, #303133); margin-bottom: 8px; }
.nf-sec-mt { margin-top: 18px; }
/* Quick-action row */
.nf-qacts { display: flex; gap: 6px; margin-bottom: 10px; }
.nf-qact {
  font-size: 12px; padding: 3px 11px; border-radius: 4px; cursor: pointer;
  background: var(--el-fill-color, #f0f2f5); color: var(--el-color-primary, #409eff);
  border: 1px solid var(--el-border-color-light, #e4e7ed);
}
.nf-qact:hover { background: var(--el-color-primary-light-9, #ecf5ff); }
/* Region groups */
.nf-group { margin-bottom: 10px; }
.nf-grp-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.nf-grp-name { font-size: 13px; font-weight: 500; color: var(--el-text-color-regular, #606266); }
.nf-grp-sel {
  font-size: 11px; padding: 1px 6px; border-radius: 3px; cursor: pointer;
  color: var(--el-color-primary, #409eff);
}
.nf-grp-sel:hover { background: var(--el-color-primary-light-9, #ecf5ff); }
/* Chips */
.nf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.nf-chip {
  padding: 4px 11px; border-radius: 12px; font-size: 13px; cursor: pointer; user-select: none;
  border: 1px solid var(--el-border-color, #dcdfe6);
  background: var(--el-fill-color-blank, #fff); color: var(--el-text-color-regular, #606266);
  transition: all .15s;
}
.nf-chip.nf-fixed {
  border-color: var(--el-color-primary, #409eff);
  background: var(--el-color-primary-light-9, #ecf5ff);
  color: var(--el-color-primary, #409eff);
  cursor: default; opacity: 0.75;
}
.nf-sec-sub {
  font-size: 11px; font-weight: 400;
  color: var(--el-text-color-secondary, #909399); margin-left: 5px;
}
.nf-chip.nf-on {
  border-color: var(--el-color-primary, #409eff);
  background: var(--el-color-primary-light-9, #ecf5ff); color: var(--el-color-primary, #409eff);
}
.nf-chip:hover:not(.nf-on) { border-color: var(--el-color-primary-light-3, #79bbff); }

/* Keyword filter */
.nf-kw-area { margin-top: 6px; }
.nf-kw-row { margin-bottom: 10px; }
.nf-kw-row:last-child { margin-bottom: 0; }
.nf-kw-row-lbl { display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.nf-kw-inc-lbl { color: var(--el-color-success, #67c23a); }
.nf-kw-exc-lbl { color: var(--el-color-danger, #f56c6c); }
.nf-kw-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin-bottom: 5px; }
.nf-kw-tags:empty { margin-bottom: 0; }
.nf-kw-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px 3px 10px; border-radius: 12px;
  background: var(--el-color-success-light-9, #f0f9eb);
  border: 1px solid var(--el-color-success-light-5, #b3e19d);
  color: var(--el-color-success-dark-2, #529b2e);
  font-size: 12px; cursor: default; user-select: none;
}
.nf-kw-tag.nf-kw-exc {
  background: var(--el-color-danger-light-9, #fef0f0);
  border-color: var(--el-color-danger-light-5, #fab6b6);
  color: var(--el-color-danger, #f56c6c);
}
.nf-kw-del {
  cursor: pointer; font-size: 13px; line-height: 1;
  opacity: 0.6; padding: 0 1px; margin-left: 2px;
}
.nf-kw-del:hover { opacity: 1; }
.nf-kw-input {
  width: 100%; height: 30px; padding: 0 10px; box-sizing: border-box;
  border-radius: 6px; border: 1px solid var(--el-border-color, #dcdfe6);
  background: var(--el-bg-color, #fff); color: var(--el-text-color-primary, #303133);
  font-size: 12px; outline: none;
}
.nf-kw-input:focus { border-color: var(--el-color-primary, #409eff); }

/* Mobile – bottom sheet */
@media (max-width: 600px) {
  .nf-overlay { padding: 0; align-items: flex-end; }
  .nf-modal { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }
}

/* Node status compact stats box */
.nf-stats-box {
  border-radius: 8px;
  padding: 18px 24px;
  margin-bottom: 16px;
  background: var(--el-bg-color, #fff);
}
.nf-stats-row {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
}
.nf-stat { flex: 1; text-align: center; }
.nf-stat-sep {
  width: 1px;
  background: var(--el-border-color-lighter, #ebeef5);
  margin: 2px 0;
  align-self: stretch;
}
.nf-stat-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--el-text-color-primary, #303133);
  line-height: 1.2;
}
.nf-s-online  { color: #18a058 !important; }
.nf-s-offline { color: #d03050 !important; }
.nf-stat-lbl {
  font-size: 12px;
  color: var(--el-text-color-secondary, #909399);
  margin-top: 4px;
}

/* Node filter header summary text */
.nf-summary {
  flex: 1;
  font-size: 11px;
  color: var(--el-text-color-secondary, #909399);
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === World map inside stats box (two-map layout) === */
.nf-stats-box {
  padding: 18px 24px 0;
}
.nf-maps-row {
  display: flex;
  margin: 14px -24px 0;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.nf-map-col { flex: 1; min-width: 0; background: #0f172a; }
.nf-map-col:first-child { border-right: 1px solid #1e3a5f; }
.nf-map-label {
  text-align: center;
  padding: 9px 0 7px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #94a3b8;
}
.nf-map-wrap { line-height: 0; }
.nf-map-svg { width: 100%; height: auto; display: block; }
.nf-map-path { fill: #1e293b; stroke: #2d4a6e; stroke-width: 0.4; }
.nf-mdot { transition: opacity 0.2s; }
.nf-mdot:hover { opacity: 1 !important; }
.nf-mring {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: nf-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes nf-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(2.8); opacity: 0;    }
  100% { transform: scale(2.8); opacity: 0;    }
}
@media (max-width: 600px) {
  .nf-maps-row { flex-direction: column; }
  .nf-map-col:first-child { border-right: none; border-bottom: 1px solid #1e3a5f; }
}

/* Save toast */
.nf-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  padding: 7px 18px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.55s ease;
  white-space: nowrap;
}