:root{
  --bg:#0f1115;
  --bg-alt:#171a21;
  --border:#262a33;
  --text:#e2e8f0;
  --text-dim:#7a899d;
  --accent:#3b82f6;
  --accent-glow:#60a5fa;
  --accent-light:#8b5cf6;
  --danger:#ef4444;
  --warn:#f59e0b;
  --ok:#10b981;
  --radius:10px;
  --radius-sm:4px;
  --shadow:0 4px 12px -2px rgba(0,0,0,.4);
  --font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans SC',sans-serif;
  --trans:.25s cubic-bezier(.4,0,.2,1);
  --logo-start:#3b82f6;
  --logo-end:#2563eb;
  --logo-accent-grad-start:#5fa8ff;
  --logo-accent-grad-end:#93c5fd;
  
  /* 表格列宽度常量 - 可调整 */
  --col-protocol-width:60px;      /* 协议列 */
  --col-monthly-width:140px;       /* 月流量列 */
  --col-node-width:70px;          /* 节点列 */
  --col-virt-width:80px;           /* 虚拟化列 */
  --col-location-width:100px;     /* 位置列 */
  --col-online-width:60px;         /* 在线列 */
  --col-load-width:60px;           /* 负载列 */
  --col-current-width:125px;        /* 当前网络列 */
  --col-total-width:125px;          /* 总流量列 */
  --col-cpu-width:45px;            /* CPU列 */
  --col-memory-width:45px;         /* 内存列 */
  --col-disk-width:45px;           /* 硬盘列 */
  --col-ping-width:100px;          /* 联通|电信|移动列 */
  
  /* 移动端列宽度常量 */
  --mobile-col-monthly-width:55px;  /* 移动端月流量列 */
  --mobile-col-node-width:80px;      /* 移动端节点列 */
  --mobile-col-load-width:60px;     /* 移动端负载列 */
  --mobile-col-current-width:125px;   /* 移动端当前网络列 */
  --mobile-col-total-width:125px;    /* 移动端总流量列 */
  --mobile-col-cpu-width:45px;      /* 移动端CPU列 */
  --mobile-col-memory-width:45px;   /* 移动端内存列 */
}
body.light{--bg:#f6f7f9;--bg-alt:#ffffff;--border:#e2e8f0;--text:#1e293b;--text-dim:#64748b;--accent:#2563eb;--accent-glow:#3b82f6;--accent-light:#8b5cf6;--shadow:0 4px 20px -4px rgba(0,0,0,.08);--logo-start:#2563eb;--logo-end:#1d4ed8;--logo-accent-grad-start:#1d4ed8;--logo-accent-grad-end:#60a5fa}
*{box-sizing:border-box}
html{
  min-height:100%;
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg) !important;
  background-color:var(--bg) !important;
}
body{
  min-height:100vh;
  height:auto;
  margin:0;
  padding:0;
  font-family:var(--font);
  background:var(--bg) !important;
  background-color:var(--bg) !important;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
html.light{background:var(--bg) !important;background-color:var(--bg) !important}
body.light{background:var(--bg) !important;background-color:var(--bg) !important}
body,button{font-size:15px;line-height:1.4}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-glow)}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1.25rem;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
}
/* 现代化标题设计 */
.brand{
  display:flex;
  align-items:center;
  font-weight:700;
  letter-spacing:.8px;
  font-size:20px;
  position:relative;
}
.brand .logo-text{
  font-size:20px;
  font-weight:800;
  line-height:1;
  display:flex;
  align-items:center;
  gap:1px;
  letter-spacing:1.2px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 50%, var(--accent-light) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 8px rgba(99,102,241,.3);
  position:relative;
}
.brand .logo-text .logo-accent{
  background:linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
  position:relative;
}
@media (max-width:640px){
  .brand{
    font-size:16px;
  }
  .brand .logo-text{
    font-size:16px;
    letter-spacing:.8px;
  }
  .actions{
    gap:.5rem;
  }
  .actions button{
    height:32px;
    width:32px;
    font-size:14px;
  }
  #lastUpdate{
    font-size:12px;
  }
}
.actions{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.actions button{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);height:32px;width:38px;border-radius:8px;cursor:pointer;display:grid;place-items:center;transition:var(--trans)}
.actions button:hover{color:var(--text);border-color:var(--accent);background:var(--accent)}
.wrapper{max-width:1680px;margin:1.2rem auto;padding:0 1.2rem;display:flex;flex-direction:column;gap:1.25rem}
.notice{padding:.9rem 1rem;border:1px solid var(--border);background:linear-gradient(145deg,var(--bg-alt),var(--bg));border-radius:var(--radius);display:flex;align-items:center;gap:.75rem;font-size:14px}
.notice.info:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.panel{display:none;flex-direction:column;gap:.75rem;animation:fade .4s ease}
.panel.active{display:flex}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-alt);box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:separate;border-spacing:0;min-width:960px}
table.data thead th{position:sticky;top:0;background:var(--bg-alt);font-weight:500;text-align:center;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#f1f5f9;padding:.7rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
table.data tbody td{padding:.55rem .75rem;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle;white-space:nowrap;color:#f8fafc}
body.light table.data thead th{color:#0f172a}
body.light table.data tbody td{color:#1e293b}
/* 防止数值变化导致列抖动：为月流量(7)/当前网络(8)/总流量(9)设置固定宽度并使用等宽数字 */
table.data th,table.data td{font-variant-numeric:tabular-nums}
/* 月流量(2) 左对齐；当前网络(8)/总流量(9) 居中 */
#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){
	/* 月流量列：向左贴近协议（减小左 padding），同时加大右 padding 拉开与节点距离 */
	width:var(--col-monthly-width);min-width:var(--col-monthly-width);max-width:var(--col-monthly-width);font-variant-numeric:tabular-nums;letter-spacing:.3px;text-align:center;padding:0 1.05rem 0 .15rem;
}
/* 节点列加宽，避免被月流量胶囊视觉挤压 */
#serversTable thead th:nth-child(3),#serversTable tbody td:nth-child(3){
	width:var(--col-node-width);min-width:var(--col-node-width);max-width:var(--col-node-width);text-align:center;
}
/* 协议列继续收紧右侧 padding 与固定宽度 */
#serversTable thead th:nth-child(1),#serversTable tbody td:nth-child(1){
	padding-right:.14rem;width:70px;min-width:70px;max-width:70px;text-align:center; /* 扩大协议列并恢复适度间距 */
}
/* 让双色胶囊居中显示 */
#serversTable tbody td:nth-child(2) .caps-traffic.duo{margin-left:0;} /* 月流量列居中显示，不向左偏移 */
#serversTable tbody td:nth-child(8) .caps-traffic.duo{margin-left:0;} /* 当前网络列居中显示，不向左偏移 */
#serversTable tbody td:nth-child(9) .caps-traffic.duo{margin-left:0;} /* 总流量列居中显示，不向左偏移 */
#serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8),
#serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){
	width:var(--col-current-width);min-width:var(--col-current-width);max-width:var(--col-current-width);font-variant-numeric:tabular-nums;letter-spacing:.3px;text-align:center;
	    /* 居中对齐，不使用不对称padding */
	    padding:.75rem;
}
/* 虚拟化、位置、在线、负载列：居中对齐 */
#serversTable thead th:nth-child(4),#serversTable tbody td:nth-child(4),
#serversTable thead th:nth-child(5),#serversTable tbody td:nth-child(5),
#serversTable thead th:nth-child(6),#serversTable tbody td:nth-child(6),
#serversTable thead th:nth-child(7),#serversTable tbody td:nth-child(7){
	text-align:center;
}

/* CPU / 内存 / 硬盘 列：居中 + 固定宽度 适配内嵌文字进度条 */
#serversTable thead th:nth-child(10),#serversTable tbody td:nth-child(10),
#serversTable thead th:nth-child(11),#serversTable tbody td:nth-child(11),
#serversTable thead th:nth-child(12),#serversTable tbody td:nth-child(12){
	width:60px;min-width:60px;max-width:60px;text-align:center;padding:.75rem .3rem;
}
/* 月流量胶囊 */
.caps-traffic{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(145deg,var(--bg),var(--bg-alt));border:1px solid var(--border);padding:3px 12px 3px 10px;border-radius:999px;font-size:12px;line-height:1;font-weight:500;position:relative;box-shadow:0 2px 4px -2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03);}
.caps-traffic:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 70%);pointer-events:none;}
.caps-traffic .io{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums;letter-spacing:.3px;}
.caps-traffic .io.in{color:var(--ok);}
.caps-traffic .io.out{color:var(--accent);}
.caps-traffic .sep{opacity:.4;font-size:11px;display:none;}
.caps-traffic.sm{padding:2px 8px 2px 7px;font-size:11px;gap:5px;}
.caps-traffic.sm .io{font-size:11px;}
/* 双色胶囊：左红右黄 */
.caps-traffic.duo{background:none;border:0;gap:0;padding:0;box-shadow:none;position:relative;border-radius:999px;overflow:hidden;font-size:12px;}
/* 统一宽度的月流量显示，每半边固定宽度确保对齐，兼容999.99GB */
.caps-traffic.duo .half{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:2px 3px;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.25; /* 与 .pill 保持一致高度 */ letter-spacing:.2px;color:#fff;font-size:12px;white-space:nowrap;min-width:64px;width:64px;text-align:center;}
/* 双色胶囊配色：
	normal (默认): 左白(#fff) 右蓝(accent)
	heavy (>=500GB 任一方向): 左黄(warn) 右红(danger)
*/
/* normal 初始：淡绿色(入) + 淡蓝色(出) */
.caps-traffic.duo.normal .half.in{background:#d1fae5;color:#065f46;} /* emerald-100 / text-emerald-800 */
body.light .caps-traffic.duo.normal .half.in{background:#d1fae5;color:#065f46;}
.caps-traffic.duo.normal .half.out{background:#bfdbfe;color:#1e3a8a;} /* blue-200 / text-blue-900 */
body.light .caps-traffic.duo.normal .half.out{background:#bfdbfe;color:#1e3a8a;}

.caps-traffic.duo.heavy .half.in{background:var(--warn);color:#111;}
body.light .caps-traffic.duo.heavy .half.in{background:var(--warn);color:#111;}
.caps-traffic.duo.heavy .half.out{background:var(--danger);color:#fff;}
body.light .caps-traffic.duo.heavy .half.out{color:#fff;}

/* 半之间分隔线 */
.caps-traffic.duo .half + .half{border-left:1px solid rgba(0,0,0,.18);} 
body.light .caps-traffic.duo .half + .half{border-left:1px solid rgba(0,0,0,.08);} 
.caps-traffic.duo.sm .half{padding:1px 2px;font-size:11px;min-width:56px;width:56px;text-align:center;letter-spacing:.15px;}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr{background:var(--bg-alt);}
table.data tbody tr:hover{background:color-mix(in srgb, var(--accent) 8%, var(--bg-alt));}
.badge{display:inline-block;padding:2px 6px;font-size:12px;border-radius:12px;font-weight:500;line-height:1.2;background:var(--bg);border:1px solid var(--border);color:var(--text-dim)}
.badge.ok{background:rgba(16,185,129,.15);color:var(--ok);border-color:rgba(16,185,129,.3)}
.badge.warn{background:rgba(245,158,11,.15);color:var(--warn);border-color:rgba(245,158,11,.4)}
.badge.err{background:rgba(239,68,68,.15);color:var(--danger);border-color:rgba(239,68,68,.4)}
.footer{margin:2rem 0 2.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:13px;color:var(--text-dim)}
.footer a{color:var(--text-dim)}
.footer a:hover{color:var(--accent)}
.muted{color:var(--text-dim)}
/* 旧状态文字样式已不再使用（采用 pill） */
@media (max-width:1100px){.nav{flex-wrap:wrap}.table-wrap{border-radius:8px}}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* modal styles */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:5vh 1rem;z-index:50;backdrop-filter:blur(4px)}
.modal-box{position:relative;width:100%;max-width:560px;background:var(--bg-alt);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 30px -6px rgba(0,0,0,.6);padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.9rem;animation:fade .25s ease}
.modal-title{margin:0;font-size:16px;font-weight:600;letter-spacing:.5px}
.modal-close{position:absolute;top:10px;right:12px;background:transparent;border:0;color:var(--text-dim);font-size:20px;line-height:1;cursor:pointer;padding:4px;border-radius:8px;transition:var(--trans)}
.modal-close:hover{color:var(--text);background:var(--bg)}
.modal-content{font-size:14px;line-height:1.5;display:grid;gap:.6rem}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .75rem;background:linear-gradient(145deg,var(--bg),var(--bg-alt));border:1px solid var(--border);border-radius:10px}
.kv span{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
/* 资源使用百分比色彩标签 */
/* 回退：移除资源使用百分比彩色标签样式 */

/* 详情弹窗三列信息行 */

/* 旧 spark 样式已移除，现使用半圆仪表盘 */
/* 全圆旧样式（保留以便回退） */
.gauge{--p:0;--col:var(--accent);width:74px;height:74px;position:relative;display:grid;place-items:center;font-size:11px;font-family:ui-monospace,monospace;font-weight:600;color:var(--text);}
.gauge:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--col) calc(var(--p)*1turn),rgba(255,255,255,0.06) 0);mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);border:1px solid var(--border);box-shadow:0 2px 6px -2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);} 
.gauge span{position:relative;z-index:1}

/* 统一扁平化进度条 */
.progress-bar{
  position:relative;
  width:60px;
  height:18px;
  background:var(--border);
  border-radius:6px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
}
.progress-fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  border-radius:0;
  transition:width .6s ease;
}
/* 优化的绿黄红三色系统 */
.progress-bar.low .progress-fill{
  background:#10b981; /* 翠绿色：0-60% - 清新自然 */
}
.progress-bar.medium .progress-fill{
  background:#f59e0b; /* 琥珀色：61-80% - 温和警示 */
}
.progress-bar.high .progress-fill{
  background:#f97316; /* 橙红色：81-90% - 明确警告 */
}
.progress-bar.critical .progress-fill{
  background:#dc2626; /* 深红色：91-100% - 紧急危险 */
}
.progress-text{
  position:relative;
  z-index:1;
  font-family:ui-monospace,monospace;
  font-size:11px;
  font-weight:700;
  color:var(--text);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  line-height:1;
}
body.light .progress-text{
  color:var(--text);
  text-shadow:0 1px 2px rgba(255,255,255,.8);
}
.progress-wrapper{
  display:inline-block;
}

/* status pill */
.pill{display:inline-block;padding:2px 8px;font-size:12px;font-weight:600;border-radius:6px;letter-spacing:.45px;min-width:48px;text-align:center;line-height:1.25;border:0;box-shadow:0 2px 4px -1px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);transition:var(--trans);color:#fff}
.pill.on{background:var(--ok)}
.pill.off{background:var(--danger)}
.pill.on:hover{filter:brightness(1.1)}
.pill.off:hover{filter:brightness(1.1)}

/* 合并延迟指示器 */
.ping-combined{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100px;
  min-width:100px;
  max-width:100px;
  height:20px;
  border-radius:6px;
  padding:0 6px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
  cursor:pointer;
}
.ping-combined::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  opacity:0;
  transition:opacity .3s ease;
}
.ping-combined:hover{
  transform:translateY(-1px);
}
.ping-combined:hover::before{
  opacity:1;
}
.ping-combined[data-lv=ok]{
  background:#10b981;
  box-shadow:0 2px 4px rgba(16,185,129,.2);
}
.ping-combined[data-lv=warn]{
  background:#f59e0b;
  box-shadow:0 2px 4px rgba(245,158,11,.2);
}
.ping-combined[data-lv=bad]{
  background:#dc2626;
  box-shadow:0 2px 4px rgba(220,38,38,.2);
}
.ping-combined .provider-group{
  display:flex;
  align-items:center;
  gap:4px;
}
.ping-combined .provider-item{
  font-size:11px;
  font-weight:700;
  opacity:1;
}

/* 居中联通电信移动列 */
#serversTable thead th:last-child, #serversTable tbody td:last-child { text-align:center; }
/* 第13列宽度适配横向条形指示器 */
#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){
	width:var(--col-ping-width);min-width:var(--col-ping-width);max-width:var(--col-ping-width);padding:.75rem .5rem;text-align:center;
}
/* 确保ping-combined div在表格单元格中居中 */
#serversTable tbody td:nth-child(13) {
	display:flex;
	justify-content:center;
	align-items:center;
}
/* 调整“总流量”表头（第9列）padding 使标题文字居中，不受正文额外右 padding 影响 */
#serversTable thead th:nth-child(9){padding-left:.75rem;padding-right:.75rem;}
.buckets{justify-content:center}

/* 响应式隐藏非关键列，保持可读性 */
@media (max-width:1100px){
	#serversTable{min-width:100%;}
	#serversTable thead th:nth-child(4),
	#serversTable tbody td:nth-child(4)  /* 虚拟化 */ {display:none}
}
@media (max-width:820px){
	#serversTable thead th:nth-child(5),
	#serversTable tbody td:nth-child(5)  /* 在线 */ {display:none}
	.buckets{gap:6px;min-width:100px}
}
@media (max-width:640px){
	.topbar{padding:.8rem 1rem}
	.actions{gap:.6rem}
	.wrapper{padding:0 1rem;gap:1rem}
	
	/* 移动端表格优化 */
	.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
	table.data{min-width:415px;font-size:.85rem;}
	table.data thead th{font-size:.75rem;padding:.5rem .4rem;}
	table.data tbody td{padding:.4rem .4rem;font-size:.8rem;}
	
	/* 隐藏部分列以适应小屏幕 - 只显示用户需要的7列 */
	#serversTable thead th:nth-child(1), /* 协议 */
	#serversTable tbody td:nth-child(1),
	#serversTable thead th:nth-child(4), /* 虚拟化 */
	#serversTable tbody td:nth-child(4),
	#serversTable thead th:nth-child(5), /* 位置 */
	#serversTable tbody td:nth-child(5),
	#serversTable thead th:nth-child(6), /* 在线 */
	#serversTable tbody td:nth-child(6),
	#serversTable thead th:nth-child(12), /* 硬盘 */
	#serversTable tbody td:nth-child(12),
	#serversTable thead th:nth-child(13), /* 联通|电信|移动 */
	#serversTable tbody td:nth-child(13) {display:none;}
	
	/* 调整显示列的宽度 - 优化移动端显示 */
	#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){width:var(--mobile-col-monthly-width);min-width:var(--mobile-col-monthly-width);max-width:var(--mobile-col-monthly-width);text-align:center;} /* 月流量 */
	#serversTable thead th:nth-child(3),#serversTable tbody td:nth-child(3){width:var(--mobile-col-node-width);min-width:var(--mobile-col-node-width);max-width:var(--mobile-col-node-width);text-align:center;} /* 节点 */
	#serversTable thead th:nth-child(7),#serversTable tbody td:nth-child(7){width:var(--mobile-col-load-width);min-width:var(--mobile-col-load-width);max-width:var(--mobile-col-load-width);text-align:center;} /* 负载 */
	#serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8){width:var(--mobile-col-current-width);min-width:var(--mobile-col-current-width);max-width:var(--mobile-col-current-width);text-align:center;} /* 当前网络 */
	#serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){width:var(--mobile-col-total-width);min-width:var(--mobile-col-total-width);max-width:var(--mobile-col-total-width);text-align:center;} /* 总流量 */
	#serversTable thead th:nth-child(10),#serversTable tbody td:nth-child(10){width:var(--mobile-col-cpu-width);min-width:var(--mobile-col-cpu-width);max-width:var(--mobile-col-cpu-width);text-align:center;} /* CPU */
	#serversTable thead th:nth-child(11),#serversTable tbody td:nth-child(11){width:var(--mobile-col-memory-width);min-width:var(--mobile-col-memory-width);max-width:var(--mobile-col-memory-width);text-align:center;} /* 内存 */
	
	.modal-box{max-width:100%;border-radius:14px;padding:1rem .95rem;}
	.modal-content{max-height:65vh;overflow:auto;}
}

/* SSL 表（证书）列宽与换行修正，避免复用服务器列宽导致名称与域名重叠 */
#sslTable th,#sslTable td{white-space:nowrap;padding:.55rem .75rem;}
#sslTable th:nth-child(1),#sslTable td:nth-child(1){width:140px;min-width:120px;}
/* 域名允许换行以防过长挤压 */
#sslTable th:nth-child(2),#sslTable td:nth-child(2){white-space:normal;max-width:320px;overflow-wrap:anywhere;}

/* === 覆盖：要求三个表 (servers / monitors / ssl) 全部改为自动宽度 === */
/* 1. 取消全局 table.data 的 min-width 对这三个表的影响 */
#serversTable,#monitorsTable,#sslTable{min-width:0;}
/* 2. 统一去除之前为 serversTable 设定的列固定宽度，允许浏览器自动分配 */
#serversTable thead th,#serversTable tbody td,
#monitorsTable thead th,#monitorsTable tbody td,
#sslTable thead th,#sslTable tbody td{
	width:auto!important;min-width:0!important;max-width:none!important;
	padding:.55rem .7rem;
}
/* 3. 允许证书域名不受 max-width 限制（如仍需换行可保留 overflow-wrap） */
#sslTable th:nth-child(2),#sslTable td:nth-child(2){max-width:none;white-space:normal;overflow-wrap:anywhere;}
/* 4. 取消“联通|电信|移动”列固定宽度 */
#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){width:auto!important;min-width:0!important;}
/* 5. 如需稍微限制仪表盘相关列最小可读宽度，可设定一个较小下限 (可选) -- 暂不设置，完全交由自动布局 */

/* === 新增：为“月流量 / 当前网络 / 总流量”三列设置最小宽度，防止内容被压缩换行或挤压 === */
/* 目标最小宽度按示例 "111.1GB|111.1GB" 设计（13 个字符左右），取 16ch 留余量 */
/* 月流量列 - 允许响应式缩放 */
#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){
	min-width:var(--col-monthly-width); /* 设置最小宽度 */
	width:var(--col-monthly-width); /* 设置默认宽度 */
	max-width:none; /* 允许扩展 */
	text-align:center;
	font-variant-numeric:tabular-nums;
}
/* 当前网络列 - 允许响应式缩放 */
#serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8){
	min-width:var(--col-current-width); /* 设置最小宽度 */
	width:var(--col-current-width); /* 设置默认宽度 */
	max-width:none; /* 允许扩展 */
	text-align:center;
	font-variant-numeric:tabular-nums;
}
/* 总流量列 - 允许响应式缩放 */
#serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){
	min-width:var(--col-total-width); /* 设置最小宽度 */
	width:var(--col-total-width); /* 设置默认宽度 */
	max-width:none; /* 允许扩展 */
	text-align:center;
	font-variant-numeric:tabular-nums;
}
.cards .card{
  border:0;
  border-radius:16px;
  padding:1.25rem;
  background:var(--bg-alt);
  box-shadow:0 4px 20px -4px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
  gap:.8rem;
  position:relative;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(10px);
}
.cards .card:hover{
  box-shadow:0 8px 32px -8px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.1);
  transform:translateY(-2px);
}
.cards .card.offline{opacity:.6;}
.cards .card.high-load{border-color:rgba(239,68,68,.6);background:linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.12));box-shadow:0 0 0 1px rgba(239,68,68,.48),0 6px 18px -6px rgba(239,68,68,.28);} 
table.data tbody tr.high-load{background:rgba(239,68,68,.18) !important;} 
table.data tbody tr.high-load:hover{background:rgba(239,68,68,.26) !important;} 

/* OS 着色（更明显）：
	1) 为各 OS 类定义 --os-color 变量
	2) 行左侧使用 inset box-shadow 画 4px 彩条
	3) 行背景叠加轻度渐变以提示 OS
*/
/* OS特定行现在使用统一的背景样式，不再有特殊背景 */ 
.cards .card[class*="os-"]{border-color:color-mix(in srgb, var(--os-color, var(--accent)) 60%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--os-color, var(--accent)) 40%, transparent),0 4px 16px -6px color-mix(in srgb, var(--os-color, #000) 35%, transparent);} 
/* 弹窗 OS 着色：左侧彩条 + 渐变与卡片一致 */
/* 取消弹窗背景着色，改为仅在标题展示系统胶囊 */
.os-chip{display:inline-flex;align-items:center;padding:2px 8px;margin-left:.5rem;border-radius:999px;font-size:13px;font-weight:600;line-height:1.2;background:var(--os-color, var(--border));color:#fff;border:0;white-space:nowrap;}

/* 为常见系统赋色 */
.os-linux{--os-color: rgba(16,185,129,.85);}   /* 绿色 (通用 Linux，保持不变) */
.os-ubuntu{--os-color: rgba(221,72,20,.9);}    /* Ubuntu 橙 (#dd4814) */
.os-debian{--os-color: rgba(215,10,83,.9);}    /* Debian 品红 (#d70a53) */
.os-centos{--os-color: rgba(102,0,153,.9);}    /* CentOS 紫 (#660099) */
.os-rocky{--os-color: rgba(1,122,66,.9);}      /* Rocky Linux 绿 (#017a42) */
.os-almalinux{--os-color: rgba(0,92,170,.9);}  /* AlmaLinux 蓝 (#005caa) */
.os-rhel{--os-color: rgba(204,0,0,.9);}        /* Red Hat 红 (#cc0000) */
.os-arch{--os-color: rgba(23,147,209,.9);}     /* Arch Linux 蓝 (#1793d1) */
.os-alpine{--os-color: rgba(14,87,123,.9);}    /* Alpine Linux 蓝 (#0e577b) */
.os-fedora{--os-color: rgba(60,110,180,.9);}   /* Fedora 蓝 (#3c6eb4) */
.os-amazon{--os-color: rgba(255,153,0,.9);}    /* Amazon Linux 橙 (#ff9900) */
.os-suse{--os-color: rgba(0,150,0,.9);}        /* openSUSE 绿 (#009600) */
.os-freebsd{--os-color: rgba(166,31,47,.9);}   /* FreeBSD 红 (#a61f2f) */
.os-openbsd{--os-color: rgba(255,204,0,.9);}   /* OpenBSD 黄 (#ffcc00) */
.os-bsd{--os-color: rgba(166,31,47,.9);}       /* BSD 系统一般跟 FreeBSD 接近 */
.os-darwin{--os-color: rgba(29,29,31,.95);} 	/* macOS 深空灰 (#1d1d1f) */
.os-windows{--os-color: rgba(0,120,215,.95);}  /* Windows 蓝 (#0078d7) */



/* 旧进度条相关样式已清理 */
.cards .card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.2rem;
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cards .card-title{
  font-weight:700;
  font-size:1.2rem;
  color:var(--text);
  letter-spacing:-.02em;
  line-height:1.2;
}
.cards .tag{
  font-size:.75rem;
  padding:.3rem .6rem;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  color:var(--text-dim);
  letter-spacing:.2px;
  font-weight:500;
  border:1px solid rgba(255,255,255,.1);
}
.cards .status-pill{
  font-size:.8rem;
  padding:.4rem .8rem;
  border-radius:20px;
  font-weight:600;
  letter-spacing:.3px;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.2);
}
.cards .status-pill.on{
  background:linear-gradient(135deg, var(--ok), color-mix(in srgb, var(--ok) 80%, #000));
  color:#fff;
}
.cards .status-pill.off{
  background:linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 80%, #000));
  color:#fff;
}
.cards .kvlist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem 1rem;
  font-size:.9rem;
  line-height:1.4;
}
.cards .kvlist div{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.5rem;
  background:rgba(255,255,255,.03);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
}
.cards .kvlist span.key{
  opacity:.8;
  font-size:.7rem;
  color:var(--text-dim);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.cards .kvlist span.value{
  font-weight:600;
  color:var(--text);
  font-size:.85rem;
}
.cards .buckets{margin-top:.4rem;display:flex;justify-content:center;}
.cards .expand-btn{position:absolute;top:.5rem;right:.5rem;background:transparent;border:0;color:var(--text-dim);cursor:pointer;font-size:.9rem;padding:.2rem;}
.cards .expand-btn:focus, .cards .expand-btn:hover{color:var(--text);}
.cards .expand-area{margin-top:.4rem;display:none;animation:fadeIn .25s ease;}
.cards .card.expanded .expand-area{display:block;}
/* 旧移动端 latency spark 样式移除 */

/* 简易信号格，用于服务连通性延迟展示 */
.sig{display:inline-flex;gap:2px;vertical-align:baseline;margin:0 4px 0 6px;align-items:flex-end;line-height:1}
.sig .b{width:3px;background:color-mix(in srgb,var(--text-dim) 35%,transparent);border-radius:2px;display:inline-block}
.sig .b:nth-child(1){height:7px}
.sig .b:nth-child(2){height:9px}
.sig .b:nth-child(3){height:11px}
.sig .b:nth-child(4){height:13px}
.sig .b:nth-child(5){height:15px}
.sig .b.on{background:var(--ok)}
.sig .b.off{opacity:.35}

/* 服务监测项：不同组竖排，同一组横排；不考虑自动换行 */
.mon-items{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mon-item{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}
.mon-item .name{margin-right:6px}
.mon-item .ms{margin-left:6px;font-variant-numeric:tabular-nums}
.mon-item .sig{margin:0 6px;transform:translateY(-1px)}

/* 新 Logo 样式 */
.brand{display:flex;align-items:center;gap:.55rem;font-weight:600;letter-spacing:.5px;font-size:16px;position:relative}
.brand .logo-mark{display:inline-flex;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--logo-start) 0%,var(--logo-end) 90%);color:#fff;align-items:center;justify-content:center;box-shadow:0 4px 12px -2px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
.brand .logo-mark svg{display:block}
.brand .logo-text{font-size:17px;font-weight:700;line-height:1;display:flex;align-items:baseline;gap:2px;letter-spacing:1px}
.brand .logo-text .logo-accent{background:linear-gradient(90deg,var(--logo-accent-grad-start),var(--logo-accent-grad-end));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
@media (max-width:640px){.brand .logo-text{font-size:15px}.brand .logo-mark{width:30px;height:30px}}