/* ============ 基础 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --侧栏底:#0a0f1e; --顶栏底:#0f172a; --主背景:#0b1120;
  --面板底:#131c31; --面板底2:#16213a; --边框:#1e2c45;
  --主文字:#e2e8f0; --次文字:#8fa3c0; --弱文字:#5d7194;
  --蓝:#3b82f6; --青:#06b6d4; --绿:#22c55e; --黄:#f59e0b; --红:#ef4444;
  --radius:10px;
}
html,body{ height:100%; }
body{
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  background:var(--主背景); color:var(--主文字); font-size:14px; overflow:hidden;
}
.隐藏{ display:none !important; }
button{ font-family:inherit; cursor:pointer; border:none; outline:none; }
input,select,textarea{ font-family:inherit; outline:none; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#263655; border-radius:4px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ============ 门屏（授权/登录） ============ */
.门屏{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%,#16294d 0%,#0b1120 60%,#070b16 100%);
}
.门卡{
  width:400px; background:linear-gradient(160deg,#15203a,#101a30);
  border:1px solid var(--边框); border-radius:16px; padding:42px 38px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.55); text-align:center;
}
.门标{ font-size:46px; margin-bottom:10px; }
.门卡 h1{ font-size:22px; font-weight:700; letter-spacing:1px; }
.门副{ color:var(--次文字); margin:10px 0 26px; font-size:13px; }
.门卡 input{
  width:100%; padding:13px 16px; margin-bottom:14px; border-radius:9px;
  background:#0c1426; border:1px solid var(--边框); color:var(--主文字); font-size:14px;
}
.门卡 input:focus{ border-color:var(--蓝); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.主按钮{
  width:100%; padding:13px; border-radius:9px; font-size:15px; font-weight:600;
  background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff;
  box-shadow:0 6px 18px rgba(37,99,235,.35); transition:.15s;
}
.主按钮:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.门错{ color:var(--红); font-size:13px; min-height:20px; margin-top:8px; }
.门脚{ margin-top:18px; color:var(--弱文字); font-size:12px; line-height:1.7; }

/* ============ 主布局 ============ */
.主界面{ display:flex; height:100vh; }
.侧栏{
  width:232px; flex-shrink:0; background:var(--侧栏底); border-right:1px solid var(--边框);
  display:flex; flex-direction:column;
}
.品牌{ display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid var(--边框); }
.品牌标{ font-size:22px; }
.品牌名{ font-size:15px; font-weight:700; letter-spacing:.5px; white-space:nowrap; }
.导航{ flex:1; padding:12px 10px; overflow-y:auto; }
.导航项{
  display:flex; align-items:center; gap:11px; padding:11px 14px; margin-bottom:3px;
  border-radius:8px; color:var(--次文字); cursor:pointer; font-size:14px; transition:.12s;
}
.导航项:hover{ background:#16213a; color:var(--主文字); }
.导航项.激活{ background:linear-gradient(90deg,rgba(59,130,246,.25),rgba(59,130,246,.06)); color:#fff; border-left:3px solid var(--蓝); padding-left:11px; }
.导航图{ font-size:16px; width:20px; text-align:center; }
.侧栏底{ padding:14px; border-top:1px solid var(--边框); }
.用户块{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.用户头像{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#06b6d4,#3b82f6); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.用户信{ line-height:1.4; }
.用户名{ font-size:13px; font-weight:600; }
.用户角色{ font-size:11px; color:var(--弱文字); }
.退出按钮{ width:100%; padding:8px; border-radius:7px; background:#1a2740; color:var(--次文字); font-size:13px; }
.退出按钮:hover{ background:#243456; color:var(--主文字); }

.内容区{ flex:1; display:flex; flex-direction:column; overflow:hidden; }
.顶栏{
  height:60px; flex-shrink:0; background:var(--顶栏底); border-bottom:1px solid var(--边框);
  display:flex; align-items:center; justify-content:space-between; padding:0 26px;
}
.顶栏标题{ font-size:17px; font-weight:600; }
.顶栏右{ display:flex; align-items:center; gap:20px; color:var(--次文字); font-size:13px; }
.在线指示{ display:flex; align-items:center; gap:7px; }
.灯{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.灯.绿{ background:var(--绿); box-shadow:0 0 8px var(--绿); }
.灯.灰{ background:#475569; }
.时钟{ font-variant-numeric:tabular-nums; }

.页面容器{ flex:1; overflow-y:auto; padding:22px 26px; }
.页面{ animation:淡入 .25s; }
@keyframes 淡入{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ============ 面板/卡片 ============ */
.面板{
  background:var(--面板底); border:1px solid var(--边框); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:18px;
}
.面板 h3{ font-size:14px; font-weight:600; color:var(--次文字); margin-bottom:14px; }
.面板行{ display:flex; gap:18px; }
.面板行>.面板{ flex:1; }
.宽二{ flex:1; } .宽三{ flex:1.6; }
/* 固定高度的图表盒，防止 canvas 在响应式模式下被异常拉高 */
.图表盒{ position:relative; width:100%; }
.图表盒.高220{ height:220px; } .图表盒.高240{ height:240px; } .图表盒.高260{ height:260px; }
.图表盒 canvas{ display:block; }
/* 局域网扫描 */
.扫描表{ margin:10px 0 4px; font-size:12.5px; }
.扫描banner{ color:#5d7194; font-size:11px; margin-left:8px; font-family:Consolas,monospace; }
.扫描分隔{ font-weight:600; color:var(--次文字); margin:14px 0 8px; padding-top:12px; border-top:1px solid var(--边); }
.扫描日志{ white-space:pre-wrap; word-break:break-all; background:#0b0f17; color:#9fb3d1;
  border:1px solid var(--边); border-radius:6px; padding:10px; font-size:11.5px; line-height:1.5;
  max-height:200px; overflow:auto; margin:6px 0 0; font-family:Consolas,monospace; }

.指标卡组{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
.指标卡{
  background:linear-gradient(150deg,var(--面板底2),var(--面板底)); border:1px solid var(--边框);
  border-radius:var(--radius); padding:20px 22px; position:relative; overflow:hidden;
}
.指标卡.卡小{ grid-template-columns:repeat(3,1fr); }
.指标卡 .卡标{ font-size:13px; color:var(--次文字); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.指标卡 .卡值{ font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; }
.指标卡 .卡值 small{ font-size:14px; color:var(--次文字); font-weight:400; margin-left:4px; }
.指标卡 .卡光{ position:absolute; right:-18px; top:-18px; width:80px; height:80px; border-radius:50%; opacity:.12; }
.卡光.蓝{ background:var(--蓝);} .卡光.绿{ background:var(--绿);} .卡光.黄{ background:var(--黄);} .卡光.红{ background:var(--红);}
.卡值.蓝{ color:#60a5fa;} .卡值.绿{ color:#4ade80;} .卡值.黄{ color:#fbbf24;} .卡值.红{ color:#f87171;}

/* ============ 工具条/表单 ============ */
.工具条{ display:flex; gap:12px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }
.搜索框,select,textarea{
  background:#0e1830; border:1px solid var(--边框); color:var(--主文字);
  border-radius:8px; padding:9px 13px; font-size:13px;
}
.搜索框{ width:240px; } .搜索框.小{ width:150px; }
select{ cursor:pointer; }
.工具条 .主按钮{ width:auto; padding:9px 18px; font-size:13px; }
.次按钮{ padding:9px 18px; border-radius:8px; background:#1a2740; color:var(--主文字); font-size:13px; }
.次按钮:hover{ background:#243456; }
.危险按钮{ padding:9px 18px; border-radius:8px; background:var(--红); color:#fff; font-size:13px; }

/* ============ 数据表 ============ */
.数据表{ width:100%; border-collapse:collapse; font-size:13px; }
.数据表 th{ text-align:left; padding:11px 12px; color:var(--弱文字); font-weight:600; font-size:12px; border-bottom:1px solid var(--边框); white-space:nowrap; }
.数据表 td{ padding:11px 12px; border-bottom:1px solid #16223a; }
.数据表 tr:hover td{ background:#16213a; }
.状态点{ display:inline-flex; align-items:center; gap:7px; }
.标签{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; margin:1px 3px 1px 0; background:#1e2c4d; color:#9fc0ff; }
.模式签{ padding:2px 9px; border-radius:6px; font-size:11px; }
.模式签.直连{ background:rgba(34,197,94,.15); color:#4ade80; }
.模式签.代理{ background:rgba(6,182,212,.15); color:#22d3ee; }
.迷你进度{ width:70px; height:6px; background:#0c1426; border-radius:4px; overflow:hidden; display:inline-block; vertical-align:middle; }
.迷你进度 i{ display:block; height:100%; border-radius:4px; }
.操作链{ color:#60a5fa; cursor:pointer; margin-right:12px; white-space:nowrap; }
.操作链.红{ color:#f87171; }
.操作链:hover{ text-decoration:underline; }

/* ============ 终端 ============ */
.终端布局{ display:flex; gap:16px; height:calc(100vh - 130px); width:100%; min-width:0; }
.终端树{ width:240px; flex-shrink:0; background:var(--面板底); border:1px solid var(--边框); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.终端树标题{ padding:12px 10px 12px 16px; font-weight:600; border-bottom:1px solid var(--边框); font-size:13px; color:var(--次文字); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.树折叠钮{ background:transparent; border:1px solid var(--边框); color:var(--次文字); border-radius:6px; width:26px; height:24px; cursor:pointer; font-size:14px; line-height:1; padding:0; flex-shrink:0; }
.树折叠钮:hover{ color:#fff; border-color:#3b82f6; background:rgba(59,130,246,.18); }
.终端布局.树折叠 .终端树{ display:none; }
#终端节点树{ flex:1; overflow-y:auto; padding:8px; }
.树分组{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--次文字); padding:8px 8px; font-weight:600; cursor:pointer; user-select:none; border-radius:7px; margin-top:3px; }
.树分组:hover{ background:#16213a; color:var(--主文字); }
.树分组箭头{ display:inline-block; width:10px; text-align:center; color:var(--弱文字); font-size:10px; line-height:1; }
.树分组名{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.树分组数{ background:#1e2c45; color:var(--弱文字); font-size:10px; font-weight:500; padding:1px 7px; border-radius:10px; }
.树分组.折叠 .树分组数{ background:transparent; }
.树组体.隐藏{ display:none; }
.树组体 .树节点{ padding-left:20px; }
.树节点{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px; }
.树节点:hover{ background:#16213a; }
.树节点.离线{ color:var(--弱文字); cursor:not-allowed; }
.树节点 .灯{ width:7px; height:7px; }
.树分组拖柄{ cursor:grab; color:#46597e; font-size:12px; line-height:1; user-select:none; }
.树分组拖柄:hover{ color:#9fc0ff; }
.树节点拖柄{ cursor:grab; color:#46597e; font-size:11px; line-height:1; user-select:none; flex-shrink:0; }
.树节点拖柄:hover{ color:#9fc0ff; }
.树分组.拖放卡{ box-shadow:0 0 0 2px #38bdf8; }
.树节点.插上方{ box-shadow:inset 0 2px 0 #38bdf8; }
.树节点.插下方{ box-shadow:inset 0 -2px 0 #38bdf8; }
.树分组.树组置顶{ background:rgba(59,130,246,.10); }
.树节点.树节点置顶{ color:#fbbf24; }
.树节点钉{ color:#5d7194; font-size:10px; margin-left:auto; flex-shrink:0; visibility:hidden; cursor:pointer; }
.树节点:hover .树节点钉{ visibility:visible; }
.树节点钉.已钉{ color:#fbbf24; visibility:visible; }
.树节点钉:hover{ color:#fbbf24; }
.树节点名{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white:nowrap; }
.终端主区{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--面板底); border:1px solid var(--边框); border-radius:var(--radius); overflow:hidden; }
.终端标签栏{ display:flex; background:#0a0f1e; border-bottom:1px solid var(--边框); min-height:42px; align-items:center; padding:0 8px; overflow-x:auto; }
.终端占位{ color:var(--弱文字); font-size:13px; padding:0 12px; }
.终端标签{ display:flex; align-items:center; gap:8px; padding:9px 14px; background:#131c31; border:1px solid var(--边框); border-bottom:none; border-radius:8px 8px 0 0; margin-right:4px; font-size:12px; cursor:pointer; white-space:nowrap; }
.终端标签.活跃{ background:#1d2942; color:#fff; }
.终端标签 .关{ color:var(--弱文字); } .终端标签 .关:hover{ color:var(--红); }
.终端容器{ flex:1; background:#0b0f17; position:relative; min-width:0; min-height:0; }
.终端实例{ position:absolute; inset:0; padding:6px; }
.xterm{ height:100%; }
.xterm-viewport{ border-radius:6px; }

/* 终端工作区（终端 + 文件面板并排） */
.终端工作区{ flex:1; display:flex; position:relative; min-height:0; }
.窗格容器{ display:flex; gap:5px; height:100%; width:100%; }
.窗格容器.横{ flex-direction:row; }
.窗格容器.竖{ flex-direction:column; }
.窗格{ flex:1 1 0; min-width:0; min-height:0; position:relative; border:1px solid #1e293b; border-radius:6px; overflow:hidden; background:#0b0f17; }
.窗格.焦点{ border-color:#38bdf8; box-shadow:0 0 0 1px rgba(56,189,248,.35) inset; }
.窗格关{ position:absolute; top:3px; right:6px; z-index:5; color:#64748b; cursor:pointer; font-size:12px; background:rgba(11,15,23,.7); padding:1px 5px; border-radius:4px; display:none; }
.窗格:hover .窗格关{ display:block; }
.窗格关:hover{ color:#ef4444; }

/* 终端工具条 */
.终端工具条{ display:flex; align-items:center; gap:7px; padding:6px 10px; background:#0a0f1e; border-bottom:1px solid var(--边框); }
.工条钮{ background:#16213a; border:1px solid var(--边框); color:var(--次文字); font-size:12px; padding:5px 10px; border-radius:6px; cursor:pointer; }
.工条钮:hover{ background:#1d2c49; color:#fff; }
.工条选{ background:#16213a; border:1px solid var(--边框); color:var(--次文字); font-size:12px; padding:4px 6px; border-radius:6px; }
.工条文本{ color:var(--弱文字); font-size:12px; }
/* 窄屏：节点树收窄，避免挤压终端（也可点树标题右侧按钮整棵收起） */
@media (max-width: 1100px){ .终端树{ width:200px; } }
@media (max-width: 820px){ .终端树{ width:168px; } .终端布局{ gap:10px; } }

/* 快捷命令片段菜单 */
.片段菜单{ position:absolute; top:46px; right:14px; z-index:30; width:250px; max-height:60%; overflow-y:auto; background:#0f1830; border:1px solid var(--边框); border-radius:9px; box-shadow:0 12px 34px rgba(0,0,0,.5); padding:6px; }
.片段项{ padding:8px 10px; border-radius:6px; cursor:pointer; font-size:12.5px; color:var(--次文字); display:flex; flex-direction:column; gap:2px; }
.片段项:hover{ background:#1b2942; color:#fff; }
.片段项 code{ color:#7dd3fc; font-size:11px; }

/* 文件管理器 */
.文件面板{ width:46%; min-width:340px; max-width:62%; display:flex; flex-direction:column; background:#0d1424; border-left:1px solid var(--边框); position:relative; }
.文件头{ display:flex; gap:6px; padding:8px; align-items:center; border-bottom:1px solid var(--边框); }
.文件路径{ flex:1; min-width:0; background:#0a0f1e; border:1px solid var(--边框); color:var(--次文字); border-radius:6px; padding:6px 9px; font-size:12px; font-family:Consolas,monospace; }
.文件工具{ display:flex; gap:6px; padding:8px; align-items:center; border-bottom:1px solid var(--边框); flex-wrap:wrap; }
.文件节点名{ color:var(--弱文字); font-size:11px; margin-left:auto; }
.文钮{ background:#16213a; border:1px solid var(--边框); color:var(--次文字); font-size:12px; padding:5px 9px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.文钮:hover{ background:#1d2c49; color:#fff; }
.文钮.主{ background:#1d4ed8; border-color:#2563eb; color:#fff; }
.文钮.主:hover{ background:#2563eb; }
.文件关:hover{ color:#ef4444; }
.文件列表{ flex:1; overflow-y:auto; font-size:12.5px; }
.文件行{ display:flex; align-items:center; gap:9px; padding:7px 12px; border-bottom:1px solid rgba(30,41,59,.5); }
.文件行.可点{ cursor:pointer; }
.文件行:hover{ background:#142039; }
.文件行 .文名{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--次文字); }
.文件行.目录 .文名{ color:#93c5fd; font-weight:600; }
.文件行 .文小{ color:var(--弱文字); font-size:11px; width:92px; text-align:right; flex-shrink:0; }
.文件行 .文时{ color:var(--弱文字); font-size:11px; width:138px; text-align:right; flex-shrink:0; }
.文件行 .文操{ display:flex; gap:9px; width:104px; justify-content:flex-end; flex-shrink:0; }
.文件行 .文操 span{ color:#60a5fa; cursor:pointer; font-size:11px; }
.文件行 .文操 span.红{ color:#f87171; }
.文件传输区{ max-height:150px; overflow-y:auto; border-top:1px solid var(--边框); background:#0a0f1e; }
.传输项{ padding:7px 12px; font-size:11.5px; color:var(--次文字); }
.传输轨{ height:5px; background:#16213a; border-radius:3px; margin-top:4px; overflow:hidden; }
.传输轨 i{ display:block; height:100%; background:linear-gradient(90deg,#22d3ee,#3b82f6); width:0; }
.传输项.失败 .传输轨 i{ background:#ef4444; }
.传输项.成功 .传输轨 i{ background:#22c55e; }
.文件拖罩{ position:absolute; inset:0; background:rgba(37,99,235,.18); border:2px dashed #60a5fa; z-index:20; display:flex; align-items:center; justify-content:center; color:#bfdbfe; font-size:16px; font-weight:600; pointer-events:none; }

/* 节点表单密钥工具 */
.密钥工具行{ display:flex; gap:8px; margin-top:7px; flex-wrap:wrap; }
.密钥工具行 .文钮{ flex:0 0 auto; }
.公钥框{ width:100%; margin-top:8px; background:#0a0f1e; border:1px solid var(--边框); border-radius:6px; color:#7dd3fc; font-size:11px; padding:8px; min-height:54px; word-break:break-all; white-space:pre-wrap; }

/* 一键安装命令 */
.命令框{ width:100%; margin:0; background:#0a1120; border:1px solid #26355a; border-radius:8px; color:#9cc4ee; font-family:Consolas,monospace; font-size:12px; padding:10px 12px; word-break:break-all; white-space:pre-wrap; line-height:1.6; max-height:120px; overflow:auto; }
.命令框.小{ font-size:11px; border-color:var(--边框); margin:6px 0; }
.安装说明{ color:var(--次文字); font-size:13px; line-height:1.7; margin:6px 0; }
.安装说明.弱{ color:var(--弱文字); font-size:12px; }

/* ============ 批量命令 ============ */
.批量布局{ display:flex; gap:16px; height:calc(100vh - 130px); }
.批量左{ width:300px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; }
.批量节点列表{ flex:1; overflow-y:auto; margin-top:12px; }
.批量节点项{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; font-size:13px; cursor:pointer; }
.批量节点项:hover{ background:#16213a; }
.批量节点项 input{ width:15px; height:15px; accent-color:var(--蓝); }
.批量右{ flex:1; display:flex; flex-direction:column; overflow-y:auto; }
.模板行{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center; }
.模板标签{ font-size:12px; color:var(--次文字); }
.模板按钮{ padding:5px 12px; border-radius:15px; background:#16233e; color:#9fc0ff; font-size:12px; }
.模板按钮:hover{ background:#1e3056; }
.命令输入框{ width:100%; min-height:90px; resize:vertical; background:#0b1322; border:1px solid var(--边框); border-radius:8px; padding:13px; color:#a5f3a0; font-family:Consolas,monospace; font-size:13px; line-height:1.6; }
.批量按钮行{ display:flex; justify-content:space-between; align-items:center; margin:14px 0; }
.已选计数{ color:var(--次文字); font-size:13px; }
.批量按钮行 .主按钮{ width:auto; padding:10px 26px; }
.高危条{ background:rgba(239,68,68,.12); border:1px solid var(--红); border-radius:8px; padding:13px 16px; margin-bottom:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:#fca5a5; }
.批量进度{ background:#0e1830; border-radius:8px; padding:12px 16px; margin-bottom:14px; font-size:13px; }
.进度条{ height:6px; background:#1a2740; border-radius:3px; margin-top:8px; overflow:hidden; }
.进度条 i{ display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#06b6d4); transition:.3s; }
.批量结果{ display:flex; flex-direction:column; gap:12px; }
.结果卡{ border:1px solid var(--边框); border-radius:8px; overflow:hidden; }
.结果头{ padding:10px 14px; display:flex; justify-content:space-between; font-size:13px; font-weight:600; }
.结果头.成功{ background:rgba(34,197,94,.12); color:#4ade80; }
.结果头.失败{ background:rgba(239,68,68,.12); color:#f87171; }
.结果输出{ background:#080d16; color:#9be79b; font-family:Consolas,monospace; font-size:12px; padding:12px 14px; max-height:240px; overflow:auto; white-space:pre-wrap; line-height:1.6; }

/* ============ 范围切换 ============ */
.范围切换{ display:flex; gap:0; border:1px solid var(--边框); border-radius:8px; overflow:hidden; }
.范围按钮{ padding:9px 16px; background:#0e1830; color:var(--次文字); font-size:13px; }
.范围按钮.激活{ background:var(--蓝); color:#fff; }

/* ============ 告警 ============ */
.告警项{ display:flex; align-items:flex-start; gap:13px; padding:14px 4px; border-bottom:1px solid #16223a; }
.告警级{ width:8px; height:38px; border-radius:4px; flex-shrink:0; }
.告警级.critical{ background:var(--红);} .告警级.warning{ background:var(--黄);} .告警级.info{ background:var(--蓝);}
.告警体{ flex:1; }
.告警内容{ font-size:13px; margin-bottom:5px; }
.告警元{ font-size:12px; color:var(--弱文字); }
.告警态{ padding:3px 11px; border-radius:14px; font-size:11px; }
.告警态.open{ background:rgba(239,68,68,.15); color:#f87171; }
.告警态.resolved{ background:rgba(34,197,94,.13); color:#4ade80; }

/* ============ 角色卡 ============ */
.角色说明行{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }
.角色卡{ background:var(--面板底); border:1px solid var(--边框); border-radius:var(--radius); padding:18px 20px; }
.角色卡 h4{ font-size:15px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.角色卡 p{ color:var(--次文字); font-size:12.5px; line-height:1.9; }

/* ============ 弹窗 ============ */
.弹窗遮罩{ position:fixed; inset:0; background:rgba(3,7,15,.7); display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(2px); }
.弹窗{ width:520px; max-height:84vh; overflow-y:auto; background:linear-gradient(160deg,#16213a,#101a30); border:1px solid var(--边框); border-radius:14px; }
.弹窗标题{ padding:18px 24px; font-size:16px; font-weight:600; border-bottom:1px solid var(--边框); }
.弹窗内容{ padding:22px 24px; }
.弹窗脚{ padding:16px 24px; display:flex; justify-content:flex-end; gap:12px; border-top:1px solid var(--边框); }
.弹窗脚 .主按钮{ width:auto; padding:9px 22px; }
.表单行{ margin-bottom:15px; }
.表单行 label{ display:block; font-size:13px; color:var(--次文字); margin-bottom:7px; }
.表单行 input,.表单行 select,.表单行 textarea{ width:100%; }
.表单行 textarea{ min-height:70px; font-family:Consolas,monospace; }
.表单双列{ display:flex; gap:14px; }
.表单双列 .表单行{ flex:1; }

/* 节点表单：分区标题 */
.表单分区{ margin-bottom:22px; }
.表单分区:last-child{ margin-bottom:2px; }
.分区标题{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:#9cc0ec; letter-spacing:.6px;
  margin-bottom:14px; padding-bottom:9px; border-bottom:1px solid #1b2944;
}
.分区标题::before{ content:''; width:3px; height:13px; border-radius:2px; background:#3b82f6; }
.红星{ color:#f87171; }
/* 统一表单控件（含普通文本 input） */
.表单行 input,.表单行 select,.表单行 textarea{
  background:#0d172f; border:1px solid #26355a; color:var(--主文字);
  border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.4;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.表单行 input::placeholder,.表单行 textarea::placeholder{ color:#56688c; }
.表单行 input:focus,.表单行 select:focus,.表单行 textarea:focus{
  border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.表单行 select{
  appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2393a9d4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.表单行 textarea{ min-height:84px; font-family:Consolas,monospace; line-height:1.6; resize:vertical; }

/* 审计详情 */
.审计输出{ background:#080d16; color:#9be79b; font-family:Consolas,monospace; font-size:12px; padding:12px; border-radius:7px; max-height:300px; overflow:auto; white-space:pre-wrap; margin-top:8px; }
.成功字{ color:#4ade80; } .失败字{ color:#f87171; }
.空提示{ text-align:center; color:var(--弱文字); padding:50px 0; font-size:13px; }

/* ============ 节点管理：分组分区卡片（折叠 / 置顶 / 文字规格） ============ */
.节点分组区{ display:flex; flex-direction:column; gap:14px; }
.节点分组卡{
  background:var(--面板底); border:1px solid var(--边框); border-radius:var(--radius);
  overflow:hidden;
}
.节点分组卡.置顶{ border-color:#3b5f9e; box-shadow:0 0 0 1px rgba(59,130,246,.28); }
.节点分组头{
  display:flex; align-items:center; gap:11px; padding:13px 16px;
  background:linear-gradient(90deg,#172440,#131c31);
  border-bottom:1px solid var(--边框); user-select:none;
}
.分组箭头{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex-shrink:0; border-radius:6px;
  font-size:12px; line-height:1; color:#cdd9ee;
  background:#1d2a47; border:1px solid #2c3e63; cursor:pointer; transition:.12s;
}
.分组箭头:hover{ background:#2b3d66; color:#fff; border-color:#3d5280; }
.分组名{ font-size:14px; font-weight:700; color:var(--主文字); cursor:pointer; }
.分组计数{ display:inline-flex; align-items:center; gap:7px; color:var(--次文字); font-size:12px; }
.分组工具{ margin-left:auto; display:flex; align-items:center; }
.分组拖柄{ cursor:grab; color:#5d7194; font-size:15px; line-height:1; padding:2px 2px; user-select:none; }
.分组拖柄:hover{ color:#9fc0ff; }
.分组拖柄:active{ cursor:grabbing; }
.行拖柄{ cursor:grab; color:#46597e; font-size:13px; margin-right:7px; user-select:none; }
.行拖柄:hover{ color:#9fc0ff; }
tr.拖拽中 td{ opacity:.45; }
.节点分组卡.拖放卡{ box-shadow:0 0 0 2px #38bdf8; border-color:#38bdf8; }
.节点分组表 tr.插上方 td{ box-shadow:inset 0 2px 0 #38bdf8; }
.节点分组表 tr.插下方 td{ box-shadow:inset 0 -2px 0 #38bdf8; }
.节点分组表 tr.行已置顶 td{ background:rgba(245,158,11,.07); }
.节点分组表{ border:none; table-layout:fixed; }
.节点分组表 th{ border-bottom:1px solid var(--边框); background:transparent; }
.节点分组表 tr:last-child td{ border-bottom:none; }
.节点分组表 td{ overflow:hidden; }
.节点分组表 td b{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.节点分组表 .IP文字,.节点分组表 .规格文字{ display:block; overflow:hidden; text-overflow:ellipsis; }
.节点小字{ color:var(--弱文字); font-size:11px; margin-top:2px; }
.节点标签行{ margin-top:3px; }
.IP文字{ font-family:Consolas,"Courier New",monospace; font-size:12.5px; color:#bcd0f0; white-space:nowrap; user-select:text; -webkit-user-select:text; cursor:text; }
.IP文字.可复制{ cursor:copy; border-radius:4px; padding:1px 4px; }
.IP文字.可复制:hover{ background:rgba(56,189,248,.12); color:#e8f1ff; }
.模式小字{ color:var(--弱文字); font-size:11px; }
.规格文字{ font-size:12.5px; color:#c6d4ec; white-space:nowrap; }
button.文钮.小{ padding:4px 12px; font-size:12px; border-radius:6px; background:#1e2c4d; color:#9fc0ff; border:1px solid #2a3d66; }
button.文钮.小:hover{ background:#273a60; }
button.文钮.小.激活{ background:rgba(245,158,11,.16); color:#fbbf24; border-color:#7a5a1e; }
button.文钮.小.红{ color:#f87171; border-color:#5a2c33; background:rgba(239,68,68,.10); }
button.文钮.小.红:hover{ background:rgba(239,68,68,.20); color:#fca5a5; }

/* 实时资源负载迷你进度条（CPU / 内存 / 磁盘） */
.规格块{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:3px 0; }
.负载条组{ display:flex; flex-direction:column; gap:3px; padding-top:6px; border-top:1px dashed #223150; }
.负载条{ display:grid; grid-template-columns:32px 1fr 36px; align-items:center; gap:6px; font-size:11px; }
.负载标签{ color:#8595b4; }
.负载轨{ height:6px; background:#16223c; border:1px solid #1f2d4d; border-radius:4px; overflow:hidden; }
.负载填{ display:block; height:100%; border-radius:3px; transition:width .5s ease; }
.负载值{ color:#a9b6cf; text-align:right; font-variant-numeric:tabular-nums; }
.负载待{ color:#66748f; font-size:11px; padding-top:5px; }

/* ============ 多设备总览：分组健康 / 设备状态墙 / 高负载 TOP ============ */
.总览副标{ font-size:12px; font-weight:400; color:var(--弱文字); margin-left:8px; }
.健康表{ table-layout:auto; }
.健康表 th,.健康表 td{ white-space:nowrap; }
.健康态{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--次文字); }
.状态墙{ display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:8px; min-height:118px; align-content:start; }
.墙块{ display:block; height:34px; border-radius:7px; cursor:pointer; transition:transform .12s, box-shadow .12s; border:1px solid rgba(255,255,255,.06); }
.墙块:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.墙块.绿{ background:linear-gradient(135deg,#22c55e,#16a34a); }
.墙块.黄{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.墙块.红{ background:linear-gradient(135deg,#ef4444,#dc2626); }
.墙块.灰{ background:linear-gradient(135deg,#475569,#334155); }
.墙图例{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--边框); font-size:12px; color:var(--次文字); }
.墙图例 .墙块{ display:inline-block; width:14px; height:14px; margin-right:3px; vertical-align:-2px; cursor:default; }
.墙图例 .墙块:hover{ transform:none; box-shadow:none; }
.TOP行{ display:grid; grid-template-columns:minmax(70px,1.1fr) minmax(120px,2fr) 44px; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed #1e2c48; }
.TOP行:last-child{ border-bottom:none; }
.TOP名{ font-size:12.5px; color:#d4e0f5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.TOP双{ display:flex; flex-direction:column; gap:3px; }
.TOP条{ display:grid; grid-template-columns:14px 1fr; align-items:center; gap:6px; }
.TOP标{ font-size:10px; color:#8595b4; text-align:center; }
.TOP峰{ font-size:13px; font-weight:700; color:#e2e8f0; text-align:right; font-variant-numeric:tabular-nums; }

/* 用户授权分组：多选勾选 */
.分组勾选盒{ border:1px solid var(--边框); border-radius:8px; padding:11px 13px; background:#0e1830; }
.勾项{ display:inline-flex; align-items:center; gap:7px; margin:4px 16px 4px 0; font-size:13px; color:var(--主文字); cursor:pointer; user-select:none; }
.勾项 input{ accent-color:var(--蓝); width:15px; height:15px; margin:0; }
.分组勾列表{ display:flex; flex-wrap:wrap; margin-top:8px; padding-top:9px; border-top:1px dashed #243455; }
.分组勾列表.禁用{ opacity:.4; pointer-events:none; }

/* ============ 大规模总览 / 告警详情 / 电源 / 登录记住 ============ */
.表工具行{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.迷你钮{ appearance:none; border:1px solid #2c3e63; background:#131f3a; color:#9fb3d1; font-size:12px; padding:4px 12px; border-radius:6px; cursor:pointer; }
.迷你钮:hover{ border-color:#3b82f6; color:#dbeafe; }
.折叠注{ font-size:12px; color:#64748b; }

/* 状态墙限高内部滚动，设备再多面板也不被撑高 */
.滚动墙{ max-height:232px; overflow-y:auto; align-content:start; padding-right:4px; }
.墙汇总{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:34px; border-radius:7px; border:1px dashed #3b82f6; color:#93c5fd; font-size:13px; font-weight:700; cursor:pointer; background:rgba(59,130,246,.08); }
.墙汇总 small{ font-size:9px; color:#7dd3fc; font-weight:400; }

/* TOP 标签加宽，容纳“CPU / 内存”汉字 */
.TOP条{ grid-template-columns:28px 1fr; }
.TOP标{ letter-spacing:.5px; }

/* 告警项可点 */
.告警项.可点{ cursor:pointer; border-radius:8px; padding-left:8px; padding-right:8px; }
.告警项.可点:hover{ background:#121d36; }

/* 弹窗内通用按钮与排版 */
.提示正文{ padding:8px 4px 4px; color:#d4e0f5; font-size:14px; line-height:1.7; }
.弹窗钮行{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; flex-wrap:wrap; }
.弹窗钮行 button{ appearance:none; border-radius:8px; padding:8px 18px; font-size:13px; cursor:pointer; border:1px solid #2c3e63; }
.主钮{ background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; border-color:transparent; }
.主钮:hover{ filter:brightness(1.08); }
.次钮{ background:#131f3a; color:#b9c8e2; }
.次钮:hover{ border-color:#3b82f6; color:#dbeafe; }

/* 告警详情表 */
.详情表{ width:100%; border-collapse:collapse; font-size:13.5px; }
.详情表 td{ padding:9px 8px; border-bottom:1px solid #1a2740; vertical-align:middle; }
.详情表 td.k{ width:88px; color:#7d8daa; white-space:nowrap; }
.红字{ color:#f87171; font-weight:700; }
.橙字{ color:#fbbf24; font-weight:700; }

/* 电源菜单 */
.电源说明{ background:#0e1830; border:1px solid #1e2c48; border-radius:8px; padding:11px 13px; font-size:12.5px; color:#9fb3d1; line-height:1.6; margin-bottom:14px; }
.电源钮组{ display:flex; flex-direction:column; gap:10px; }
.电源钮{ appearance:none; text-align:left; background:#131f3a; border:1px solid #2c3e63; border-radius:10px; padding:12px 15px; cursor:pointer; color:#e2e8f0; font-size:14px; font-weight:600; }
.电源钮 span{ display:block; font-size:11.5px; font-weight:400; color:#7d8daa; margin-top:3px; }
.电源钮:hover{ border-color:#3b82f6; background:#16254a; }
.电源钮.危{ border-color:#7f1d1d; }
.电源钮.危:hover{ border-color:#ef4444; background:#3a1620; }

/* 登录记住账号 */
.记住行{ display:flex; align-items:center; gap:7px; font-size:13px; color:#94a3b8; margin:2px 0 4px; cursor:pointer; user-select:none; align-self:flex-start; }
.记住行 input{ accent-color:#3b82f6; width:15px; height:15px; }

/* 网络配置弹窗 */
.加载行{ padding:26px 0; text-align:center; color:var(--弱文字); font-size:13px; }
.网络说明{
  background:rgba(59,130,246,.10); border:1px solid rgba(59,130,246,.30);
  color:#cfe0ff; font-size:12.5px; line-height:1.7; border-radius:8px;
  padding:11px 13px; margin-bottom:16px;
}
.网络说明 b{ color:#fff; }
.错误行{
  background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35);
  color:#fca5a5; font-size:12.5px; line-height:1.6; border-radius:8px;
  padding:10px 13px; margin-bottom:14px;
}
.单选组{ display:flex; gap:20px; flex-wrap:wrap; }
.单选组 label{
  display:inline-flex; align-items:center; gap:7px; margin:0;
  font-size:13px; color:var(--主文字); cursor:pointer;
}
.单选组 input{ width:auto; }
.网状态行{
  border-radius:8px; padding:12px 14px; font-size:12.5px; line-height:1.7;
  background:#101d38; border:1px solid #26355a; color:#c3d0ea;
}
.网状态行 b{ color:#fff; }
.网状态行.成功{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4); color:#bbf7d0; }
.网状态行.失败{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#fecaca; }
.弹窗钮行 .主钮:disabled,.弹窗钮行 button:disabled{ opacity:.5; cursor:not-allowed; filter:none; }

/* 网络配置 · 常用DNS快选 */
.DNS快选{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.DNS快选标题{ font-size:12px; color:var(--弱文字); margin:0 2px 0 0; }
.DNS快选钮{ padding:4px 11px; font-size:12px; border-radius:6px; background:var(--面板底2); color:var(--次文字); border:1px solid var(--边框); transition:.12s; }
.DNS快选钮:hover{ color:#fff; border-color:var(--蓝); background:#1c2c4d; }

/* ============ 手机端：汉堡按钮 + 离屏抽屉（默认隐藏，窄屏启用） ============ */
.汉堡钮{ display:none; background:transparent; color:var(--主文字); font-size:22px; line-height:1; padding:6px 12px 6px 0; }
.移动遮罩{ display:none; position:fixed; inset:0; background:rgba(2,6,15,.55); z-index:90; }

@media (max-width: 768px){
  /* 侧栏改为离屏抽屉，加“移动打开”类后滑入 */
  .汉堡钮{ display:block; }
  .侧栏{
    position:fixed; left:0; top:0; bottom:0; z-index:100;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .侧栏.移动打开{ transform:translateX(0); }
  .移动遮罩.显示{ display:block; }

  /* 顶栏 / 页面容器收窄 */
  .顶栏{ padding:0 14px; height:54px; }
  .顶栏右{ gap:12px; }
  .在线指示{ display:none; }
  .页面容器{ padding:14px 12px; }

  /* 工具条：搜索框自适应，避免固定宽度撑出横向滚动 */
  .工具条 .搜索框{ flex:1; min-width:140px; width:auto; }

  /* KPI 指标卡两列 */
  .指标卡组{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .指标卡{ padding:14px; }
  .指标卡 .卡值{ font-size:24px; }

  /* 面板行纵向堆叠 */
  .面板行{ flex-direction:column; gap:0; }
  .面板{ padding:14px; overflow-x:auto; }

  /* 宽数据表横向滚动，避免挤压错位 */
  .数据表{ min-width:620px; }

  /* 角色卡一行一个 */
  .角色说明行{ grid-template-columns:1fr; gap:12px; }

  /* 终端：纵向布局，节点树在上、终端在下（树默认折叠，点“节点列表”展开） */
  .终端布局{ height:calc(100vh - 96px); flex-direction:column; gap:10px; }
  .终端树{ width:100% !important; max-height:42%; }
  .终端主区{ flex:1; }

  /* 批量命令：左栏节点列表在上、右侧在下 */
  .批量布局{ flex-direction:column; height:auto; gap:12px; }
  .批量左{ width:100%; max-height:250px; }
  .批量右{ overflow:visible; }

  /* 文件管理器全宽 */
  .文件面板{ width:100%; min-width:0; max-width:100%; }

  /* 弹窗近全宽、表单单列 */
  .弹窗{ width:calc(100vw - 24px); }
  .表单双列{ flex-direction:column; gap:0; }
}

@media (max-width: 420px){
  .指标卡组{ grid-template-columns:1fr 1fr; gap:8px; }
  .指标卡{ padding:12px; }
  .顶栏标题{ font-size:15px; }
  .时钟{ font-size:12px; }
}