:root {
    --bg: #0f1115;
    --bg-alt: #171a21;
    --border: #262a33;
    --text: #e2e8f0;
    --text-dim: #7a899d;
    --accent: #3b82f6;
    --accent-glow: #60a5fa;
    --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
}

body.light {
    --bg: #f6f7f9;
    --bg-alt: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-dim: #64748b;
    --accent: #2563eb;
    --accent-glow: #3b82f6;
    --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,
body {
	height: 100vh; /* 100vh = 视口高度的100% */
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased
}

html.light {
    background: var(--bg)
}

body,
button {
    font-size: 14px;
    line-height: 1.35
}

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;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border)
}

.brand {
    font-weight: 600;
    letter-spacing: .5px;
    font-size: 15px
}

.nav {
    display: flex;
    gap: .5rem
}

.nav button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: var(--trans);
    font-weight: 500
}

.nav button.active,
.nav button:hover {
    color: var(--text);
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow), 0 4px 10px -2px rgba(0, 0, 0, .5)
}

.actions {
    margin-left: auto;
    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 {
    /* 让 main 部分自动填充剩余空间 */
    flex: 1;
    /* 移除固定 min-height，改为 flex 自适应 */
    min-height: auto;
    /* 清除左右自动边距，让内容贴紧屏幕两侧 */
    margin-left: 0;
    margin-right: 0;
    /* 保持原有的其他样式 */
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--bg-alt);
    border-radius: 0;
}

.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: 13px
}

.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);
    min-height: 100px;
    
    /* 新增以下样式实现居中及左右间距 */
    margin-left: auto;    /* 水平居中 */
    margin-right: auto;
    margin-top: 1rem;
    margin-left: 1rem;    /* 左右间距（使用rem适配不同屏幕） */
    margin-right: 1rem;
}

table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 0;
}

table.data thead th {
    position: sticky;
    top: 0;
    background: var(--bg-alt);
    font-weight: 500;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-dim);
    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: 13px;
    vertical-align: middle;
    white-space: nowrap
}

/* 防止数值变化导致列抖动：为月流量(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 拉开与节点距离 */
    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) {}

/* 协议列继续收紧右侧 padding 与固定宽度 */
#serversTable thead th:nth-child(1),
#serversTable tbody td:nth-child(1) {
    padding-right: .14rem;
    /* 扩大协议列并恢复适度间距 */
}

/* 让双色胶囊更靠近协议列 */
#serversTable tbody td:nth-child(2) .caps-traffic.duo {
    margin-left: -6px;
}

/* 向协议方向微移，视觉更靠近；右侧 padding 增大避免靠近节点 */
#serversTable thead th:nth-child(8),
#serversTable tbody td:nth-child(8),
#serversTable thead th:nth-child(9),
#serversTable tbody td:nth-child(9) {
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
    text-align: center;
    /* 进一步拉开与 CPU/内存/硬盘 组的视觉距离 */
    padding-right: 1.95rem;
}

/* 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) {
    text-align: center;
    padding-left: 1.1rem;
    padding-right: 0;
    /* 继续右移并贴近右侧列 */
}

/* 月流量胶囊 */
.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;
}

/* 宽度按内容自适应（不再拉伸占满列），每半边仅为其文本 + padding，可容纳最大 111.1MB */
.caps-traffic.duo .half {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.25;
    /* 与 .pill 保持一致高度 */
    letter-spacing: .25px;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
}

/* 双色胶囊配色：
	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 4px;
    font-size: 10px;
    min-width: 0;
}

table.data tbody tr:last-child td {
    border-bottom: none
}

table.data tbody tr:hover {
    background: rgba(255, 255, 255, .04)
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    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 {
    border-radius: 0;
    /* 确保 footer 紧贴内容底部 */
    margin-top: auto;
    /* 保持原有的其他样式 */
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 12px;
    color: var(--text-dim);
    background: var(--bg-alt);
    padding: 1rem;
}

.footer a {
    color: var(--text-dim)
}

.footer a:hover {
    color: var(--accent)
}

.muted {
    color: var(--text-dim)
}

.status-off {
    color: var(--danger);
    font-weight: 600
}

.status-on {
    color: var(--ok);
    font-weight: 600
}

@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: center;
    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: 0;
    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: 13px;
    line-height: 1.5;
    display: grid;
    gap: .6rem;
    max-height: 70vh;
    overflow-y: auto;
}

.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: 12px
}

/* 资源使用百分比色彩标签 */
/* 回退：移除资源使用百分比彩色标签样式 */

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

/* 旧 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
}

/* 半圆仪表盘 */
.gauge-half {
    --p: 0;
    width: 60px;
    height: 34px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    gap: 0;
    color: var(--text);
}

.gauge-half svg {
    width: 100%;
    height: 28px;
    overflow: visible;
}

.gauge-half path {
    fill: none;
    stroke-linecap: round;
}

/* 基础颜色 (暗色/亮色自动过渡) */
.gauge-half path.track {
    stroke: color-mix(in srgb, var(--text-dim) 18%, transparent);
    stroke-width: 6;
}

.gauge-half path.arc {
    stroke: var(--gauge-base, #3b82f6);
    stroke-width: 8;
    stroke-dasharray: 126;
    stroke-dashoffset: calc(126*(1 - var(--p)));
    transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1), stroke .35s;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.gauge-half[data-type=mem] path.arc {
    --gauge-base: #10b981
}

.gauge-half[data-type=hdd] path.arc {
    --gauge-base: #f59e0b
}

/* 阈值颜色：>=50% 警告黄，>=90% 危险红 */
.gauge-half[data-warn] path.arc {
    stroke: var(--warn)
}

.gauge-half[data-bad] path.arc {
    stroke: var(--danger)
}

/* 指针：以中心(50,50)为原点旋转；半圆角度范围 180deg -> 从 180deg (左) 到 0deg(右) */
.gauge-half span {
    line-height: 1;
    position: relative;
    top: -6px;
    font-size: 12px;
}

/* 亮色模式细化对比度 */
body.light .gauge-half path.track {
    stroke: color-mix(in srgb, var(--text-dim) 28%, transparent)
}

body.light .gauge-half path.arc {
    filter: none
}

body.light .gauge-half .needle {
    background: linear-gradient(var(--text), var(--text-dim))
}

/* status pill */
.pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    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)
}

/* buckets CU/CT/CM (simple version) */
.buckets {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 140px
}

.bucket {
    position: relative;
    width: 26px;
    height: 34px;
    background: linear-gradient(145deg, var(--bg), var(--bg-alt));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 4px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end
}

.bucket span {
    display: block;
    width: 100%;
    background: var(--accent);
    border-radius: 4px 4px 6px 6px;
    height: var(--h);
    align-self: flex-end;
    transition: height .8s cubic-bezier(.4, 0, .2, 1), background .3s
}

.bucket[data-lv=warn] span {
    background: var(--warn)
}

.bucket[data-lv=bad] span {
    background: var(--danger)
}

.bucket label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    font-size: 10px;
    text-align: center;
    color: var(--text-dim);
    pointer-events: none
}

.bucket:hover label {
    color: var(--text)
}

/* 居中联通电信移动列 */
#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) {
    padding-left: 0;
    padding-right: .55rem;
    /* 去除左 padding 进一步贴近 */
}

/* 调整“总流量”表头（第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(3),
    #serversTable tbody td:nth-child(3),
    /* 节点 */
    #serversTable thead th:nth-child(4),
    #serversTable tbody td:nth-child(4),
    /* 虚拟化 */
    #serversTable thead th:nth-child(8),
    #serversTable tbody td:nth-child(8)

    /* 当前网络 */
        {
        display: none
    }
}

@media (max-width:820px) {
    #serversTable thead th:nth-child(5),
    #serversTable tbody td:nth-child(5),
    /* 在线 */
    #serversTable thead th:nth-child(6),
    #serversTable tbody td:nth-child(6)

    /* 负载 */
        {
        display: none
    }

    .buckets {
        gap: 6px;
        min-width: 100px
    }
}

@media (max-width:640px) {
    #serversTable thead th:nth-child(4),
    #serversTable tbody td:nth-child(4)

    /* 位置 */
        {
        display: none
    }

    .topbar {
        flex-wrap: wrap;
        padding: .6rem .8rem
    }

    .actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: .4rem
    }

    #panel-servers .table-wrap {
        display: none;
    }

    #serversCards {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .75rem;
        margin-top: .5rem;
        background: var(--bg-alt);
        padding: 1rem;
        border-radius: var(--radius);
    }

    /* 服务与证书移动端卡片 */
    #panel-monitors .table-wrap,
    #panel-ssl .table-wrap {
        display: none;
    }

    #monitorsCards,
    #sslCards {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .75rem;
        margin-top: .5rem;
        background: var(--bg-alt);
        padding: 1rem;
        border-radius: var(--radius);
    }

    .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),
#serversTable thead th:nth-child(8),
#serversTable tbody td:nth-child(8),
#serversTable thead th:nth-child(9),
#serversTable tbody td:nth-child(9) {
    min-width: 22ch !important;
    /* 保留自动宽度，但不小于此值 */
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cards .card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem .85rem;
    background: linear-gradient(145deg, var(--bg), var(--bg-alt));
    display: flex;
    flex-direction: column;
    gap: .45rem;
    position: relative;
}

.cards .card.offline {
    opacity: .6;
}

.cards .card.high-load {
    border-color: rgba(239, 68, 68, .55);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, .4), 0 4px 16px -4px rgba(239, 68, 68, .3);
}

table.data tbody tr.high-load {
    background: rgba(239, 68, 68, .10);
}

table.data tbody tr.high-load:hover {
    background: rgba(239, 68, 68, .18);
}

/* 旧进度条相关样式已清理 */
.cards .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.cards .card-title {
    font-weight: 600;
    font-size: .95rem;
}

.cards .tag {
    font-size: .65rem;
    padding: .15rem .4rem;
    border-radius: 4px;
    background: var(--border);
    letter-spacing: .5px;
}

.cards .status-pill {
    font-size: .6rem;
    padding: .2rem .45rem;
    border-radius: 999px;
    font-weight: 500;
}

.cards .status-pill.on {
    background: var(--ok);
    color: #fff;
}

.cards .status-pill.off {
    background: var(--danger);
    color: #fff;
}

.cards .kvlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem .75rem;
    font-size: .7rem;
    line-height: 1.25;
}

.cards .kvlist div {
    display: flex;
    flex-direction: column;
}

.cards .kvlist span.key {
    opacity: .6;
}

.cards .buckets {
    margin-top: .25rem;
}

.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 样式移除 */

/* 新 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);
    transition: var(--trans)
}

.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))
}

.brand:hover .logo-mark {
    transform: translateY(-2px) scale(1.05)
}

.brand:hover .logo-text {
    color: var(--text)
}

@media (max-width:640px) {
    .brand .logo-text {
        font-size: 15px
    }

    .brand .logo-mark {
        width: 30px;
        height: 30px
    }
}