:root{
  --bg:#0d1117; --panel:#161b22; --line:#232a35; --txt:#e6edf3; --dim:#8b949e;
  --amber:#3a2f12; --amber-b:#8a6d1e; --red:#3a1518; --red-b:#c9403f;
  --blue:#1f6feb; --gray:#30363d; --green:#2ea043;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.5 "Segoe UI","Microsoft YaHei",system-ui,sans-serif}
.mono{font-family:"Cascadia Code",Consolas,monospace}
.dim{color:var(--dim)}

/* 登录 */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:34px 30px;width:320px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.login-logo{font-size:18px;font-weight:600;text-align:center;letter-spacing:1px}
.login-err{color:#ff7b72;font-size:13px;text-align:center}
.login-tip{color:var(--dim);font-size:12px;text-align:center;margin-top:4px}
.inp{background:#0d1117;border:1px solid var(--line);color:var(--txt);
  padding:10px 12px;border-radius:8px;outline:none;font-size:14px}
.inp:focus{border-color:var(--blue)}
.inp.sm{padding:6px 10px;font-size:13px;max-width:190px}
.btn-primary{background:var(--blue);color:#fff;border:0;padding:10px;border-radius:8px;
  font-size:15px;cursor:pointer}
.btn-primary:hover{filter:brightness(1.1)}

/* 顶栏 */
.topbar{display:flex;align-items:center;gap:18px;padding:12px 20px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-size:16px;font-weight:600;letter-spacing:.5px}
.spacer{flex:1}
.live{font-size:12px;margin-left:8px;padding:2px 8px;border-radius:10px}
.live.on{color:#3fb950;background:#0f2417}
.live.off{color:#d29922;background:#241c0f}
.stat{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.stat b{font-size:20px}
.stat span{font-size:11px;color:var(--dim)}
.stat.danger b{color:#ff7b72}
.logout{color:var(--dim);text-decoration:none;font-size:13px;border:1px solid var(--line);
  padding:6px 12px;border-radius:8px}
.logout:hover{color:var(--txt);border-color:var(--dim)}
.who{color:var(--dim);font-size:13px}

/* 过滤 */
.filters{display:flex;align-items:center;gap:10px;padding:12px 20px;flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.chk{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:4px}
.btn{background:#21262d;color:var(--txt);border:1px solid var(--line);padding:6px 14px;
  border-radius:8px;cursor:pointer;font-size:13px}
.btn:hover{border-color:var(--dim)}
.hint{color:var(--dim);font-size:12px;margin-left:auto}

/* 表格 */
.grid{width:100%;border-collapse:collapse}
.grid th{position:sticky;top:57px;background:#12161d;color:var(--dim);font-weight:500;
  text-align:left;padding:9px 14px;font-size:12px;border-bottom:1px solid var(--line);z-index:4}
.grid td{padding:8px 14px;border-bottom:1px solid #1a2029;vertical-align:top}
.grid tr:hover td{background:#12161d}
.grid tr.sens td{background:#1c1808}
.grid tr.sens:hover td{background:#221d0a}
.grid tr.over td{background:#231012;box-shadow:inset 3px 0 0 var(--red-b)}
.grid tr.over:hover td{background:#2a1316}
/* 操作内容：单行截断 + 省略号，鼠标悬停看全文（完整链路见会话抽屉），避免长包把行撑成一堵墙 */
.txt{max-width:680px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid tr.clk{cursor:pointer}
.role{color:var(--dim)}
.badge{font-size:11px;padding:1px 8px;border-radius:10px;white-space:nowrap}
.badge.red{background:var(--red);color:#ff9a97;border:1px solid var(--red-b)}
.badge.blue{background:#0d2f66;color:#79b8ff;border:1px solid #1f6feb}
.badge.gray{background:#21262d;color:var(--dim);border:1px solid var(--gray)}
.footer{padding:16px 20px;color:var(--dim)}

@keyframes flash{from{background:#173a2a}to{background:transparent}}
.grid tr.flash td{animation:flash 1.2s ease-out}

/* 徽章补色 */
.badge.amber{background:var(--amber);color:#f0c674;border:1px solid var(--amber-b)}
.badge.green{background:#0f2417;color:#3fb950;border:1px solid var(--green)}

/* 顶栏次要按钮 */
.btn.ghost{background:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--txt)}
.btn.xs{padding:2px 8px;font-size:11px;margin-left:6px}
.btn.danger{border-color:var(--red-b);color:#ff9a97}
.btn.danger:hover{background:#2a1316}

/* 折叠面板：从顶部弹出的浮层，点按钮即刻可见，不再埋在页面底部 */
.panel{position:fixed;top:58px;left:24px;right:24px;z-index:30;margin:0;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  max-height:calc(100vh - 78px);overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.panel.hidden{display:none}
.panel-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;font-weight:600;
  border-bottom:1px solid var(--line);background:#12161d}
.panel-hd .hint{font-weight:400}
.panel-hd .spacer{flex:1}
.empty{padding:18px;color:var(--dim);text-align:center}
.authbar{display:flex;gap:10px;align-items:center;padding:12px 14px;flex-wrap:wrap;border-bottom:1px solid var(--line)}

/* 告警汇总条 */
.sumbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:#10141b;font-size:12px;color:var(--dim)}
.sumcell{background:#161b22;border:1px solid var(--line);border-radius:8px;padding:4px 10px}
.sumcell b{color:var(--txt);font-size:14px;margin:0 2px}
.sumcell.wide{flex:1;min-width:220px}
.sumcell.red{color:#ff9a97;border-color:var(--red-b)} .sumcell.red b{color:#ff9a97}
.sumcell.amber{color:#f0c674;border-color:var(--amber-b)} .sumcell.amber b{color:#f0c674}

/* 绑定卡片 */
.bindcard{border-bottom:1px solid var(--line);padding:10px 14px}
.bindhd{margin-bottom:6px}
.bindhd .dim{margin-left:10px;font-size:12px}
.grid.mini th{position:static;padding:5px 10px}
.grid.mini td{padding:5px 10px}

/* 可点击行 + 会话详情抽屉 */
.grid tr.clk{cursor:pointer}
.grid tr.clk:hover td{background:#182233}
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20}
.drawer-mask.hidden{display:none}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,92vw);z-index:21;
  background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:-16px 0 50px rgba(0,0,0,.5);transition:transform .18s ease}
.drawer.hidden{transform:translateX(100%);pointer-events:none}
.drawer-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;font-weight:600;
  border-bottom:1px solid var(--line);background:#12161d}
.drawer-meta{padding:12px 16px;border-bottom:1px solid var(--line);background:#10141b;
  display:flex;flex-direction:column;gap:6px}
.drawer-meta .mrow{display:flex;gap:10px;font-size:13px}
.drawer-meta .mrow span{color:var(--dim);min-width:56px}
.drawer-body{overflow-y:auto;padding:8px 0}
.tl{display:flex;gap:10px;padding:7px 16px;border-left:3px solid transparent}
.tl:hover{background:#12161d}
.tl.sens{background:#1c1808;border-left-color:var(--amber-b)}
.tl.over{background:#231012;border-left-color:var(--red-b)}
.tl-t{color:var(--dim);font-size:12px;white-space:nowrap;padding-top:1px}
.tl-c{flex:1;font-size:13px;word-break:break-word}
.tl-k{color:#79b8ff;margin-right:4px}
.tl-dir{font-size:10px;padding:0 5px;border-radius:8px;margin-right:5px}
.tl-dir.out{background:#0d2f66;color:#79b8ff}
.tl-dir.in{background:#21262d;color:var(--dim)}