.可点击摘要{cursor:pointer;transition:transform .16s,box-shadow .16s}
.可点击摘要:hover{transform:translateY(-2px);box-shadow:0 10px 22px #006e2f12}
.全球节点卡{overflow:hidden}
.全球地图{position:relative;aspect-ratio:1774/887;overflow:hidden;border:1px solid #d7e9dc;border-radius:8px;background:#fff}
.全球地图>img,.全球地图>.地图点位层{transform-origin:var(--缩放焦点,50% 50%);transition:transform .35s ease}
.全球地图>img{display:block;width:100%;height:100%;object-fit:fill}
.地图点位层{position:absolute;inset:0}
.全球地图.已放大>img,.全球地图.已放大>.地图点位层{transform:scale(1.7)}
.地图缩放提示{position:absolute;right:10px;bottom:10px;padding:4px 7px;border:1px solid #cfe4d5;border-radius:6px;background:#fffffff0;color:#47705a;font-size:10px;pointer-events:none}
.静态地图点{position:absolute;transform:translate(-50%,-50%);z-index:2;border:0;background:transparent;padding:0;display:grid;justify-items:center;gap:5px;cursor:pointer;color:#17613a;font:600 11px Inter,"Noto Sans SC",sans-serif;white-space:nowrap}
.静态地图点 i{display:block;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #22c55e38;transition:transform .18s,box-shadow .18s}
.静态地图点 span{position:absolute;bottom:17px;opacity:0;pointer-events:none;transform:translateY(4px);padding:4px 7px;border:1px solid #cfe4d5;border-radius:9px;background:#fffffff5;box-shadow:0 4px 12px #0c331326;transition:opacity .16s,transform .16s}
.静态地图点:hover,.静态地图点:focus{z-index:4;outline:0}.静态地图点:hover i,.静态地图点:focus i{transform:scale(1.18);box-shadow:0 0 0 6px #22c55e26}.静态地图点:hover span,.静态地图点:focus span{opacity:1;transform:translateY(0)}
.静态地图点.异常{color:#b92f2f}.静态地图点.异常 i{background:#ef4444;box-shadow:0 0 0 4px #ef444440;animation:异常点位脉冲 1.45s ease-out infinite}.静态地图点.异常:hover i,.静态地图点.异常:focus i{box-shadow:0 0 0 7px #ef444426}
@keyframes 异常点位脉冲{0%{box-shadow:0 0 0 3px #ef444455}70%{box-shadow:0 0 0 12px #ef444400}100%{box-shadow:0 0 0 3px #ef444400}}
.地图空提示{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#657168;font-size:12px}
.概览首行{grid-template-columns:minmax(0,3fr) minmax(0,2fr)!important}
.系统设置布局{grid-template-columns:minmax(260px,3fr) minmax(0,7fr)!important}
.概览首行 .卡片{min-width:0}
.概览首行 .图表{gap:2px;overflow:visible}
.概览首行 .图表 i{min-width:0}
@media(max-width:1100px){.概览首行,.系统设置布局{grid-template-columns:1fr!important}}
.全球地图:before,.全球地图:after{display:none}
.经线,.纬线,.地图说明{display:none}
.经线{top:10%;bottom:10%;width:34%}
.经线一{left:33%}.经线二{right:33%}
.纬线{left:12%;right:12%;height:36%}
.纬线一{top:13%}.纬线二{bottom:13%}
.地图说明{position:absolute;left:49%;top:43%;transform:translate(-50%,-50%);font-size:10px;color:#53745d;background:#fff;padding:4px 7px;border-radius:9px;border:1px solid #d4e7d9}
.服务器点位{position:absolute;z-index:3;color:#1a6535;text-decoration:none;font-size:10px;font-weight:700;white-space:nowrap;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:5px}
.服务器点位 i{width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 0 0 5px #22c55e22}
.服务器点位.离线 i{background:#ef4444;box-shadow:0 0 0 5px #ef444422}
.服务器点位 span{background:#ffffffdb;border:1px solid #d8e7dc;border-radius:9px;padding:3px 6px}
.顶栏右侧 #刷新页面{font-size:18px;line-height:1}
.通知按钮{font-size:20px;line-height:1}
.用户头像{background:#006e2f}
.卡头操作{display:flex;align-items:center;gap:14px}
.卡头操作 a{white-space:nowrap}
.刷新按钮,.概览操作按钮{display:inline-flex;align-items:center;justify-content:center;width:74px;height:34px;padding:0;border:1px solid #d7e9dc;border-radius:5px;background:#f2f8f4;color:#21633c!important;font:600 14px/1 inherit;text-decoration:none;white-space:nowrap}
.刷新按钮:hover,.刷新按钮:focus,.概览操作按钮:hover,.概览操作按钮:focus{border-color:#88c8a0;background:#e7f5eb;color:#075f30!important;outline:0;text-decoration:none}
.行操作{align-items:center;gap:8px}
.行操作 .小按钮{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:32px;padding:0 10px;border:1px solid #d7e9dc;border-radius:5px;background:#f2f8f4;color:#21633c;font-size:12px;line-height:1;white-space:nowrap}
.行操作 .小按钮:hover,.行操作 .小按钮:focus{border-color:#88c8a0;background:#e7f5eb;color:#075f30;outline:0}
.行操作 .小按钮.删除{border-color:#f3d8d8;background:#fff6f6;color:#bf4545}
.行操作 .小按钮.删除:hover,.行操作 .小按钮.删除:focus{border-color:#ecb4b4;background:#ffeded;color:#a83030}
.趋势卡操作{display:flex;align-items:center;gap:8px}
.趋势卡操作 .选择框{width:126px;max-width:42vw;height:32px;padding:0 28px 0 9px;font-size:11px;text-overflow:ellipsis}
.趋势卡操作 .趋势范围选择{width:104px}
.资源趋势列表{display:grid;gap:0;border-top:1px solid #edf2ee}
.趋势指标行{display:grid;grid-template-columns:142px minmax(0,1fr);align-items:center;gap:13px;min-height:72px;border-bottom:1px solid #edf2ee}
.趋势指标行:last-child{border-bottom:0}
.趋势摘要{display:grid;grid-template-columns:minmax(54px,1fr) 66px;align-items:center;gap:6px;min-width:0}
.趋势摘要 span{display:block;color:#69766d;font-size:10px;font-weight:600}
.趋势摘要 b{display:block;margin-top:4px;color:#17241b;font:600 16px "JetBrains Mono",monospace;white-space:nowrap}
.趋势摘要 b small{margin-left:2px;color:#87928a;font:500 8px Inter,"Noto Sans SC",sans-serif}
.趋势指标行.正常 .趋势摘要 b{color:#168544}
.趋势指标行.警告 .趋势摘要 b{color:#b87700}
.趋势指标行.危险 .趋势摘要 b{color:#d73737}
.迷你曲线,.主曲线{display:block;width:100%;overflow:visible}
.迷你曲线{height:34px}
.主曲线{height:66px}
.曲线线条{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.曲线填充{stroke:none}
.主曲线 circle{stroke:#fff;stroke-width:1.5;opacity:.15;transition:opacity .14s,r .14s;cursor:help;vector-effect:non-scaling-stroke}
.主曲线:hover circle{opacity:.55}
.主曲线 circle:hover{opacity:1;r:4}
.趋势曲线区{min-width:0;padding:4px 2px}
.趋势阈值说明{display:flex;align-items:center;flex-wrap:wrap;gap:8px 15px;padding-top:10px;color:#738078;font-size:9px}
.趋势阈值说明 span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.趋势阈值说明 i{width:7px;height:7px;border-radius:50%}
.趋势阈值说明 i.正常{background:#16a34a}.趋势阈值说明 i.警告{background:#e6a11a}.趋势阈值说明 i.危险{background:#ef4444}
.通知按钮 i[hidden],.通知按钮 i:empty{display:none!important}
.图表{overflow:visible}
.图表 i{position:relative;cursor:help;transition:filter .15s,transform .15s}
.图表 i:hover{filter:saturate(1.35);transform:scaleX(1.08);z-index:3}
.图表 i:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);width:max-content;max-width:180px;padding:6px 8px;border:1px solid #cfe4d5;border-radius:5px;background:#173424;color:#fff;font:500 11px/1.35 Inter,"Noto Sans SC",sans-serif;white-space:nowrap;box-shadow:0 6px 18px #0f271a2e;opacity:0;pointer-events:none;transition:opacity .14s,transform .14s}
.图表 i:hover:after{opacity:1;transform:translate(-50%,0)}
.告警处理行{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:12px;padding:4px 0;border-bottom:1px solid #edf1ee}
.告警处理行.可选择行{grid-template-columns:28px minmax(0,1fr) 92px}
.告警处理行:last-child{border-bottom:0}
.告警处理行 .告警项{grid-template-columns:minmax(0,1fr) auto;border-bottom:0;min-width:0}
.告警处理行 .告警项>i{display:none}
.告警项.已确认>i,.告警项.已确认.严重>i{background:#22c55e!important;box-shadow:0 0 0 3px #22c55e1c}
.告警选择{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.告警选择 input{width:15px;height:15px;accent-color:#006e2f}
.告警行操作{display:flex;justify-content:flex-end;align-items:center;min-width:92px}
.告警行操作 .状态标签{display:inline-flex;width:auto;white-space:nowrap}
.告警批量操作{display:flex;align-items:center;gap:8px}
@media(max-width:640px){.告警处理行{grid-template-columns:minmax(0,1fr);gap:8px 10px}.告警处理行.可选择行{grid-template-columns:24px minmax(0,1fr)}.告警行操作{grid-column:1;justify-content:flex-start;min-width:0;padding-bottom:8px}.告警处理行.可选择行 .告警行操作{grid-column:2}.告警处理行 .告警项 time{white-space:nowrap}#概览告警{min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}#概览告警 .告警项{grid-template-columns:7px minmax(0,1fr);gap:8px;padding:9px 0;min-width:0}#概览告警 .告警项>div{min-width:0}#概览告警 .告警项 b{font-size:12px!important;line-height:1.35}#概览告警 .告警项 p{max-width:100%;font-size:11px!important;line-height:1.45;margin-top:3px;white-space:normal;overflow-wrap:anywhere;word-break:break-word}#概览告警 .告警项 time{grid-column:2;font-size:10px!important;line-height:1.35;margin-top:2px;white-space:nowrap}}
.弹窗底{gap:12px}
.弹窗底 .按钮{display:inline-flex;align-items:center;justify-content:center;min-width:88px;text-decoration:none;line-height:1;letter-spacing:.04em}
.弹窗底 .弹窗取消{font-weight:600;letter-spacing:.08em}
.站内信操作{align-items:center}
@media(max-width:760px){.静态地图点{font-size:8px}.静态地图点 i{width:9px;height:9px;border-width:2px}.静态地图点 span{padding:2px 4px}.服务器点位{font-size:9px}}
@media(max-width:560px){.资源趋势卡 .卡头{display:grid}.趋势卡操作{display:grid;grid-template-columns:minmax(0,1fr) 105px;margin-top:10px}.趋势卡操作 .选择框,.趋势卡操作 .趋势范围选择{width:100%;max-width:none}.趋势指标行{grid-template-columns:112px minmax(0,1fr);gap:8px}.趋势摘要{grid-template-columns:1fr}.趋势摘要 .迷你曲线{display:none}.主曲线{height:58px}}
.消息区{position:fixed!important;inset:0!important;z-index:120!important;display:grid!important;place-items:center!important;padding:20px!important;pointer-events:none}
.消息{width:min(252px,calc(100vw - 40px));min-height:76px;display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:12px;padding:16px 14px 16px 18px!important;border:1px solid #28a45c!important;border-radius:8px!important;background:#e8f8ed!important;color:#111!important;box-shadow:0 16px 48px #0f3c201f!important;font-size:14px!important;line-height:1.55;pointer-events:auto}
.消息.长消息{width:max-content;max-width:min(420px,calc(100vw - 40px))}
.消息>span{min-width:0;max-width:20em;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center}
.消息.错误{border-color:#28a45c!important;background:#e8f8ed!important;color:#111!important}
.消息关闭{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:#174b2a;font:500 24px/1 Arial,sans-serif;cursor:pointer}
.消息关闭:hover,.消息关闭:focus{background:#d3f0dc;outline:0}
.进度 i.正常{background:#22c55e}.进度 i.警告{background:#f5b83d}.进度 i.危险{background:#ef4444}
.数据表滚动区{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:auto;touch-action:auto}
.服务器节点列表{margin-bottom:18px}.节点切换组{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px}.节点切换项{min-width:0;display:grid;grid-template-columns:1fr auto;gap:6px 8px;padding:12px;border:1px solid #dce9df;border-radius:8px;color:#26352b;text-decoration:none;background:#fff;transition:border-color .16s,box-shadow .16s}.节点切换项:hover,.节点切换项.当前{border-color:#24a45b;box-shadow:0 6px 16px #136d2c12}.节点切换项 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.节点切换项 small{grid-column:1/-1;color:#728177;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.节点切换项 .状态标签{align-self:start}.固定硬件卡{margin:18px 0}.硬件网格{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.硬件网格>div{min-width:0;padding:13px 14px;border:1px solid #e0ebe3;border-radius:7px;background:#f8fbf9}.硬件网格 span{display:block;color:#77857b;font-size:12px;margin-bottom:7px}.硬件网格 b{display:block;color:#18251c;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.弹窗 .硬件网格{margin:8px 0 18px}.弹窗 .硬件网格 b{font-size:15px}@media(max-width:900px){.硬件网格{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:560px){.硬件网格{grid-template-columns:repeat(2,minmax(0,1fr))}.节点切换组{grid-template-columns:1fr}}
.仅手机{display:none}.节点列表操作{display:flex;align-items:center;gap:12px}.节点列表操作 .按钮{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.节点列表折叠按钮{display:none}
dialog{width:min(780px,calc(100% - 32px));max-height:calc(100vh - 48px);overflow:auto}.弹窗{padding:26px 28px}.弹窗头{align-items:flex-start;padding-bottom:17px;margin-bottom:2px;border-bottom:1px solid #e7eee9}.弹窗头 h2{font-size:19px}.弹窗头 .页头说明{margin-top:6px}.弹窗头 button{width:32px;height:32px;display:grid;place-items:center;border-radius:5px;line-height:1;color:#536057}.弹窗头 button:hover{background:#eef5f0}.弹窗 .表单网格{gap:16px 20px;margin-top:20px}.弹窗 .表单项{gap:8px}.弹窗 .表单项 small{line-height:1.35}.弹窗 .硬件网格{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 22px}.弹窗 .硬件网格>div{padding:16px}.弹窗底{padding-top:17px;margin-top:21px;border-top:1px solid #e7eee9}@media(max-width:640px){.弹窗{padding:20px}.弹窗 .硬件网格{grid-template-columns:repeat(2,minmax(0,1fr))}}
.自动部署网格{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 20px}.自动部署网格 .表单项{min-width:0}@media(max-width:1100px){.自动部署网格{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.自动部署网格{grid-template-columns:1fr}}
.移动菜单按钮,.移动导航遮罩{display:none}
@media(max-width:760px){html,body{max-width:100%;overflow-x:hidden}.侧栏{display:flex;position:fixed;inset:0 auto 0 0;width:min(286px,84vw);padding:18px 12px 16px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:14px 0 36px #0f172a2e;z-index:210}.移动导航已打开 .侧栏{transform:translateX(0)}.移动导航遮罩{display:block;position:fixed;inset:0;z-index:200;border:0;background:#0f172a00;pointer-events:none;transition:background .22s}.移动导航已打开 .移动导航遮罩{background:#0f172a66;pointer-events:auto}.侧栏 nav{overflow-y:auto;padding:4px 0 10px}.侧栏状态{padding:14px 8px 0}.主体{margin-left:0;min-width:0}.顶栏{height:58px;padding:0 14px;gap:8px}.移动品牌{display:block;font-size:15px;white-space:nowrap}.移动菜单按钮{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 10px;border:1px solid #dce7df;border-radius:5px;background:#fff;color:#28573a;font:600 12px inherit;white-space:nowrap}.顶栏右侧{margin-left:auto;gap:6px}.图标按钮,.通知按钮{width:34px;height:34px}.用户头像{width:32px;height:32px;margin-left:0}main{padding:20px 14px 34px}.页头{display:block;margin-bottom:18px}.页头 h1{font-size:20px}.页头说明{font-size:12px;line-height:1.55}.按钮组{margin-top:13px;flex-wrap:wrap}.按钮{height:38px;font-size:13px}.摘要网格{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.摘要卡{padding:14px}.摘要卡 b{font-size:25px;margin:7px 0 3px}.摘要卡>span{font-size:11px}.摘要卡 small{font-size:10px;line-height:1.4}.卡片{padding:15px;margin-bottom:13px;overflow:visible}.卡头{gap:10px;margin-bottom:14px}.卡头 h2{font-size:16px}.卡头 p,.分页提示{font-size:11px;line-height:1.55}.全球地图{border-radius:6px}.服务器抬头{padding:18px;margin-bottom:13px;display:block}.服务器抬头 h1{font-size:21px}.服务器抬头 .状态标签{display:inline-flex;margin-top:8px}.数据表{min-width:760px}.数据表 th,.数据表 td{padding:11px 10px;font-size:12px}.服务器状态卡{min-width:0;overflow:hidden}.服务器状态卡 .数据表滚动区{display:block;width:100%;max-width:100%;min-width:0;margin:0;padding:0 0 8px;overflow-x:scroll!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:auto;touch-action:auto;scrollbar-width:thin}.数据表滚动区:focus{outline:2px solid #9bd5ae;outline-offset:-2px}.行操作{gap:4px}.小按钮{font-size:11px;padding:6px 7px}.筛选栏{display:grid;grid-template-columns:1fr;gap:9px}.筛选栏 .输入框{min-width:0;width:100%}.输入框,.选择框{width:100%;height:39px;font-size:13px}.表单网格,.自动部署网格{grid-template-columns:1fr!important;gap:14px}.表单项 label{font-size:12px}.测速主面板{padding:18px}.测速数字{grid-template-columns:1fr;gap:14px;margin-top:18px}.测速数字 b{font-size:27px}.硬件网格,.弹窗 .硬件网格{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.硬件网格>div,.弹窗 .硬件网格>div{padding:12px}.硬件网格 b{font-size:14px}.节点切换组{grid-template-columns:1fr}.服务器节点列表 .卡头{align-items:center}.节点列表操作{gap:9px;flex-shrink:0}.节点列表操作 .按钮,.节点列表操作 .节点列表全部按钮{height:38px;min-width:0;padding:0 12px;border:1px solid var(--主色);border-radius:4px;background:var(--主色);color:#fff!important;font:600 13px inherit;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}.节点列表折叠按钮{display:inline-flex}.仅桌面{display:none}.仅手机{display:inline}.详情节点切换组.已折叠 .节点切换项:nth-child(n+2){display:none}.消息{width:min(252px,calc(100vw - 28px));min-height:68px;padding:13px 12px 13px 15px!important;font-size:13px}.消息.长消息{width:max-content;max-width:calc(100vw - 28px)}.消息区{padding:14px!important}dialog{width:calc(100% - 22px);max-height:calc(100dvh - 22px)}.弹窗{padding:19px 16px}.弹窗头{padding-bottom:13px}.弹窗头 h2{font-size:17px}.弹窗底{flex-wrap:wrap;gap:8px;padding-top:14px;margin-top:16px}.弹窗底 .按钮{flex:1;min-width:0}.登录区{padding:16px}.登录卡{padding:24px 18px}}
