/* ============================================================
   节点页最终结构：推荐 → 当前 → 地区筛选 → 其他节点
   ============================================================ */

/* ---- 区块标题 ---- */
.fsec {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 4px 10px;
}
.fsec:first-child { margin-top: 6px; }
.fsec__t { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #33405A; }
.fsec__s { font-size: 11px; color: #98A3B4; }

/* ---- 推荐节点卡 ---- */
/* ★ 推荐卡（重新设计）：紧凑横排 —— 旗帜 + 信息 + 右侧按钮
   白底 + 淡蓝描边定身份；蓝只出现在按钮与一个细标识上 */

/* ★ 降饱和：柔和蓝，不再是高饱和主色块 */
.cur {
  position: relative; overflow: hidden;
  padding: 15px 16px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(150deg, #6FA8F0 0%, #4A8AE6 52%, #3D7BD4 100%);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 13px 30px rgba(74, 138, 230, .30),
              inset 0 1px 0 rgba(255, 255, 255, .30);
}
.cur::after {
  content: ""; position: absolute; right: -46px; top: -56px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .26), transparent 68%);
  pointer-events: none;
}
.cur > * { position: relative; }
.cur__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.cur__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  color: rgba(255, 255, 255, .95);
}
.cur__live .dot { background: #fff; }
.cur__live .dot { width: 7px; height: 7px; }
.cur__dur {
  font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .92);
  font-variant-numeric: tabular-nums;
}
.cur__body { display: flex; align-items: center; gap: 12px; }
.cur__flag {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .94);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 40, 90, .20);
}
.cur__name { font-size: 16px; font-weight: 750; color: #fff; letter-spacing: -.015em; }
.cur__meta { font-size: 11.5px; color: rgba(255, 255, 255, .85); margin-top: 3px; }
.cur__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.cur__stat {
  flex: 1; text-align: center; padding: 9px 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .24);
}
.cur__sk { font-size: 10px; color: rgba(255, 255, 255, .76); }
.cur__sv {
  font-size: 13px; font-weight: 750; color: #fff; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.cur__off {
  padding: 20px 16px; border-radius: 22px; text-align: center;
  background: rgba(255, 255, 255, .58);
  border: 1px dashed rgba(11, 18, 32, .16);
  color: #8E97A4; font-size: 13px;
}

/* ---- 地区筛选：胶囊 ---- */
.rf { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; -ms-overflow-style: none; }
.rf::-webkit-scrollbar { display: none; }
.rfc {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 8px 0 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 1px 2px rgba(11, 18, 32, .05);
  font-size: 12.5px; font-weight: 700; color: #44536B;
  transition: background .18s, box-shadow .2s, border-color .18s;
}
.rfc__f {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.rfc__n {
  font-size: 11px; font-weight: 700; color: #98A3B4;
  padding: 1px 7px; border-radius: 99px; background: rgba(11, 18, 32, .06);
}
/* ★ 降饱和：选中态改淡蓝底，不再整块实心蓝 */
.rfc.is-on {
  background: rgba(10, 132, 255, .19);
  border-color: rgba(10, 132, 255, .44);
  box-shadow: 0 2px 9px rgba(10, 132, 255, .16);
  color: #0A4FAE;
}
.rfc.is-on .rfc__f { opacity: 1; }
.rfc.is-on .rfc__n { background: rgba(10, 132, 255, .24); color: #0A4FAE; }

/* ---- 地区筛选：下拉按钮 ---- */
.rsel {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(11, 18, 32, .05);
  font-size: 13px; font-weight: 750; color: #12203A;
}
.rsel__n {
  font-size: 11px; font-weight: 700; color: #5A6472;
  padding: 1px 7px; border-radius: 99px; background: rgba(11, 18, 32, .07);
}

/* ---- 地区下拉浮层：从下拉按钮正下方展开（不是全屏层） ---- */
.rselwrap { position: relative; display: inline-block; }
.rdrop {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 232px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow: 0 16px 40px rgba(11, 18, 32, .18), inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transform-origin: top right;
  opacity: 0; transform: translateY(-8px) scale(.96);
  pointer-events: none;
  transition: opacity .24s, transform .3s cubic-bezier(.22, .9, .25, 1);
  z-index: 30;
}
.rdrop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.rdrop__in { max-height: 280px; overflow-y: auto; padding: 6px; }
.rdrop__in::-webkit-scrollbar { width: 3px; }
.rdrop__in::-webkit-scrollbar-thumb { background: rgba(11, 18, 32, .18); border-radius: 3px; }

/* 浮层内一行（紧凑、圆角高亮，不用分隔线） */
.rpick__item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 12px;
  transition: background .16s;
}
.rpick__item + .rpick__item::before { display: none; }
.rpick__item:hover { background: rgba(10, 132, 255, .08); }
.rpick__item.is-on { background: rgba(10, 132, 255, .13); }
.rpick__f {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rpick__n { flex: 1; font-size: 14px; font-weight: 650; color: #12203A; }
.rpick__c { font-size: 11.5px; color: #8E97A4; font-variant-numeric: tabular-nums; }
.rpick__tick { color: var(--c-primary); display: flex; }

/* ---- 内联 SVG 国旗（Windows 不渲染国旗 emoji，必须矢量） ---- */
.frow__flag .flag,
.rfc__f .flag,
.rpick__f .flag,
.jrail__f .flag,
.cur__flag .flag,
.rsel .flag {
  display: inline-flex; flex-shrink: 0; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(20, 40, 80, .12), 0 1px 3px rgba(20, 40, 80, .12);
}
.frow__flag .flag svg,
.rfc__f .flag svg,
.rpick__f .flag svg,
.jrail__f .flag svg,
.cur__flag .flag svg,
.rsel .flag svg { width: 100%; height: 100%; display: block; }

/* ---- 其他节点列表 ---- */
/* ★ 两行结构：第 1 行「名称 + 延迟」，第 2 行「进度条 + 负载状态」
   两行布局横向空间宽松，进度条定在 48px（比原来 88px 短一半） */
.frow {
  display: flex;
  width: 100%;                        /* ★ 首页 .conn 是 align-items:center，不撑满就会收缩 */ align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: 15px;
  /* ★ 与其他元素同一套玻璃表面，不再写死数值 */
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-inset);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  flex-wrap: nowrap;
}
.frow + .frow { margin-top: 8px; }

/* ★ 首页节点信息行的进度条：吃掉剩余宽度 —— 比列表行的固定 72px 明显更长 */
.conn .load    { flex: 1 1 auto; min-width: 0; }
.conn .loadbar { flex: 1 1 auto; width: auto; min-width: 80px; }
.conn .load__t {
  flex-shrink: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.frow__flag {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
}
.frow__main { flex: 1; min-width: 0; }
.frow__line1 { display: flex; align-items: baseline; min-width: 0; }
/* ★ 延迟已独立成元素，移到操作按钮左侧（同一行）
   第 2 行现在只放「进度条 + 负载状态」，左对齐 */
.frow__line2 {
  display: flex; align-items: center;
  gap: 8px; margin-top: 8px;
  min-width: 0; flex-wrap: nowrap;
}
/* 名称过长时省略号，绝不挤压相邻元素 */
.frow__name {
  font-size: 14px; font-weight: 650; color: #12203A; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.frow__meta { font-size: 11px; color: #8E97A4; margin-top: 3px; }
.frow__lat {
  font-size: 12.5px; font-weight: 750; color: #6E8098;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}

/* ---------- ④ 带宽负载：进度线条（主）/ 圆环（备选） ---------- */
/* 进度线条：一条细圆角轨道 + 按比例填充，比三段柱好辨认得多 */
/* ★ 进度线条（缩短版）：44px 固定宽 —— 各行严格对齐，且给名称留足空间 */
.loadbar {
  display: block;
  width: 72px; height: 5px;      /* ★ 列表行：比原来 48px 加长 50% */
  border-radius: 99px;
  background: rgba(11, 18, 32, .12);
  overflow: hidden;
  flex: 0 0 72px;
}
.loadbar i {
  display: block; height: 100%;
  border-radius: 99px;
  background: currentColor;
  transition: width .4s cubic-bezier(.22, .9, .25, 1);
}
/* ★ 负载进度条：空闲=绿（#2F9D62）· 正常=琥珀 · 繁忙=红
   列表行 / 推荐卡 / 当前卡 三处都继承这里，颜色完全一致 */
.load {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0;
}
.load--idle { color: #2F9D62; }
.load--ok   { color: #C8871A; }
.load--busy { color: #CF3F3C; }
.loadbar i { background: currentColor; }
.load__t {
  font-size: 11px; color: currentColor; opacity: .94;
  white-space: nowrap; flex-shrink: 0;
}

/* 圆环（备选）：20px 环形进度，省横向空间 */
/* ★ 圆环比例：18px 环形进度，从 12 点方向顺时针填充 */
.loadring {
  display: block;
  width: 18px; height: 18px;
  flex: 0 0 18px;
}
.loadring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.loadring circle { fill: none; stroke-width: 3.6; }
.loadring .tk { stroke: rgba(11, 18, 32, .12); }
.loadring .br {
  stroke: currentColor; stroke-linecap: round;
  transition: stroke-dashoffset .5s cubic-bezier(.22, .9, .25, 1);
}

/* 旧的「三段柱」—— 仅在说明区对照用。
   ★ 必须用独立命名空间 .loadbars：早先它叫 .load i，
   与新的 .loadbar 填充同优先级且位置靠后，把填充宽度覆盖成 3px（页面变乱的根因） */
.loadbars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  vertical-align: -1px; margin-right: 5px;
}
.loadbars i { width: 3px; border-radius: 1.5px; background: rgba(11, 18, 32, .13); }
.loadbars i:nth-child(1) { height: 5px; }
.loadbars i:nth-child(2) { height: 8px; }
.loadbars i:nth-child(3) { height: 11px; }
.load--idle .loadbars i:nth-child(1),
.load--ok   .loadbars i:nth-child(-n+2),
.load--busy .loadbars i { background: currentColor; }

/* -----★ 卡片上的进度条：与列表用完全相同的配色（不再覆盖 .load--* 的颜色）
     只调整"轨道底色"和"蓝底卡上的档位文字"，因为背景不同；
     进度条本身的填充色由 .load--* 决定，三处完全一致 */
.cur .loadbar { background: rgba(255, 255, 255, .30); }
/* 推荐卡是白底 → 轨道用列表那种深一点的灰 */
.cur--rec .loadbar { background: rgba(11, 18, 32, .12); }
/* 蓝底当前卡：档位文字改白字保证可读（进度条填充色仍是列表色） */
.cur:not(.cur--rec) .load__t { color: #fff; opacity: .94; }

/* ============================================================
   ⚠️ 以下为误删后补回（替换脚本跨到文件末尾导致丢失）
   ============================================================ */

/* ---------- 列表「切换 / 已连接」按钮：同一位置两种状态 ---------- */
.frow__act {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 30px; padding: 0 11px; border-radius: 99px;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: -.005em;
  color: #0A5FC4;
  background: rgba(10, 132, 255, .10);
  border: 1px solid rgba(10, 132, 255, .30);
  flex-shrink: 0;
  transition: background .3s, border-color .3s, color .3s;
}
.frow__act--on {
  color: #0A4FAE;
  background: rgba(10, 132, 255, .21);
  border-color: rgba(10, 132, 255, .48);
  font-weight: 780;
}
.frow--on .frow__name { color: #12203A; }

/* ---------- 蓝底（当前连接卡）内部元素 ---------- */
.cur .nact--off {
  color: #fff;
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .46);
}
.cur .nact--off:hover {
  background: #fff; color: #0A6BD8; border-color: #fff;
  box-shadow: 0 5px 14px rgba(0, 40, 90, .22);
}

/* ---------- 底部排除提示（此前未定义，一直是裸文本） ---------- */
.fhint {
  text-align: center;
  font-size: 11px; color: #A6B0C0;
  padding: 14px 0 4px;
}

/* ---------- 未连接时的文字提示（替代「当前节点」空态卡） ---------- */
.starthint {
  text-align: center;
  padding: 30px 12px 26px;
}
.starthint__t {
  font-size: 14px; font-weight: 650;
  color: #7E8FA8;
  letter-spacing: .02em;
}

/* ---------- 当前卡里的负载：单独一行，不挤在元信息里 ---------- */
.cur__main { flex: 1; min-width: 0; }
.cur__line1 { display: flex; align-items: baseline; min-width: 0; }
.cur__line2 {
  display: flex; align-items: center;
  gap: 8px; margin-top: 8px; min-width: 0;
}
.cur__line2 .loadbar { flex: 0 0 64px; width: 64px; }

/* ---------- 延迟：独立元素，与右侧操作按钮并排在同一行 ---------- */
.frow__lat, .cur__lat {
  font-size: 12.5px; font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;                 /* 不伸不缩，宽度由内容决定 */
  align-self: center;             /* 与按钮同处于行的垂直中线上 */
}
.frow__lat { color: #6E8098; }

.cur__lat { color: rgba(255, 255, 255, .92); }
.cur__name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ============================================================
   推荐卡（.cur--rec）：与当前连接卡同一套结构，只换配色
     当前卡 = 主色蓝底（已连接）
     推荐卡 = 白底 + 蓝描边（未连接）
   ============================================================ */
.cur--rec {
  color: #12203A;
  background: linear-gradient(158deg, rgba(255, 255, 255, .96), rgba(238, 245, 255, .88));
  border: 1px solid rgba(10, 132, 255, .46);
  box-shadow: 0 8px 22px rgba(10, 132, 255, .14);
}
/* 右上角淡蓝光，替代当前卡里的白色高光 */
.cur--rec::after {
  content: ""; position: absolute; right: -46px; top: -56px;
  width: 172px; height: 172px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 132, 255, .13), transparent 68%);
  pointer-events: none;
}
.cur--rec .cur__live--rec { color: #0A6BD8; }
.cur--rec .cur__note {
  font-size: 11.5px; font-weight: 750; color: #8E97A4;
  font-variant-numeric: tabular-nums;
}
.cur--rec .cur__name { color: #12203A; }
.cur--rec .cur__lat { color: #6E8098; }
.cur--rec .cur__flag { background: rgba(255, 255, 255, .90); }

/* 一键连接：主色实心（推荐卡上的主操作） */
.nact--primary {
  color: #fff;
  background: linear-gradient(158deg, #6FA8F0 0%, #4A8AE6 60%, #3D7BD4 100%);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(74, 138, 230, .28),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
.nact--primary:hover {
  background: linear-gradient(158deg, #4DA5FF 0%, #0A84FF 60%, #0066CC 100%);
}


/* ---------- 蓝底当前卡上的「空闲」绿：提亮以保证可读 ----------
   #2F9D62 在蓝底上太暗，换成品牌渐变里已有的浅绿 #5BDF86 */
.cur:not(.cur--rec) .load--idle { color: #5BDF86; }