/* ==========================================================================
   玖壹 · 运维监控平台  |  数据大屏 · 深藏蓝 + 青（高对比可读）
   ========================================================================== */
:root{
  --bg0:#070d1f; --bg1:#0a1530; --bg2:#0e1d3d;
  --panel:rgba(13,27,56,.62);
  --panel-2:rgba(18,36,72,.55);
  --line:rgba(90,160,255,.16); --line2:rgba(90,170,255,.34);
  --cyan:#37d6ff; --cyan-d:rgba(55,214,255,.55);
  --blue:#5b8def; --blue-d:rgba(91,141,239,.5);
  --ink:#e7f1ff;            /* 主文字：亮，不再发灰 */
  --ink-2:#cbdcf2;
  --sub:#9fb6d8; --dim:#7a92b6;
  --ok:#2ee6a6; --warn:#ffb020; --err:#ff5470; --grey:#5a6b85;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Rajdhani","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%,rgba(40,90,180,.22),transparent 60%),
    radial-gradient(900px 600px at 100% 110%,rgba(30,120,160,.14),transparent 55%),
    radial-gradient(700px 500px at -8% 90%,rgba(30,70,150,.12),transparent 60%),
    linear-gradient(160deg,var(--bg1),var(--bg0) 70%);
  color:var(--ink);height:100vh;overflow:hidden;
  -webkit-font-smoothing:antialiased;letter-spacing:.2px;
}
/* 网格底纹 + 暗角 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(90,160,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,160,255,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 40%,#000 55%,transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 40%,#000 55%,transparent 100%);
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 220px rgba(0,0,0,.55)}

.screen{position:relative;height:100vh;display:flex;flex-direction:column;
  padding:clamp(12px,1.3vw,20px);gap:clamp(9px,1vw,14px)}

/* ============================ 顶栏 ============================ */
.header{display:flex;align-items:center;gap:14px;flex:0 0 auto;min-height:40px}
.deco{width:14px;height:14px;position:relative;flex:0 0 auto;display:inline-block}
.deco::before,.deco::after{content:"";position:absolute;width:14px;height:14px}
.deco::before{top:0;left:0;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);box-shadow:0 0 10px var(--cyan-d)}
.deco::after{bottom:0;right:0;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);box-shadow:0 0 10px var(--cyan-d)}
.brand{display:flex;flex-direction:column;line-height:1.1;flex:0 0 auto}
.brand .title{font-size:clamp(17px,1.85vw,26px);font-weight:700;letter-spacing:3px;color:#eaf6ff;
  text-shadow:0 0 20px rgba(55,214,255,.6);white-space:nowrap}
.brand .sub{font-size:10.5px;letter-spacing:2.4px;color:var(--dim);margin-top:2px;white-space:nowrap}

.nav{display:flex;gap:8px;margin-left:18px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{position:relative;font-family:inherit;font-size:14.5px;letter-spacing:1px;color:var(--sub);
  background:transparent;border:1px solid var(--line);padding:7px 16px;border-radius:8px;cursor:pointer;transition:.2s;
  display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav button:hover{color:var(--ink);border-color:var(--line2);background:rgba(30,60,120,.25)}
.nav button.on{color:#06121f;background:linear-gradient(180deg,var(--cyan),#1fa9d6);border-color:transparent;
  font-weight:700;box-shadow:0 0 16px var(--cyan-d)}
.nbadge{font-size:11px;font-weight:700;background:var(--err);color:#fff;border-radius:9px;
  padding:0 5px;min-width:17px;text-align:center;line-height:16px;height:16px}
.nav button.on .nbadge{background:#06121f;color:var(--cyan)}
.h-spacer{flex:1 1 auto}

/* 搜索 */
.search-wrap{position:relative;flex:0 1 240px;min-width:150px}
.search-wrap .si{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:14px}
.search-wrap input{width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:rgba(7,14,32,.66);border:1px solid var(--line2);border-radius:8px;padding:7px 10px 7px 28px;outline:none;transition:.18s}
.search-wrap input::placeholder{color:var(--dim)}
.search-wrap input:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(55,214,255,.28)}
.search-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:280px;z-index:40;
  background:linear-gradient(180deg,#0f2247,#0a1730);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 12px 40px rgba(2,10,30,.8);padding:6px;display:none;max-height:330px;overflow:auto}
.search-pop.on{display:block}
.sp-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;text-decoration:none;color:var(--ink);transition:.15s}
.sp-item:hover{background:rgba(40,80,160,.4)}
.sp-t{font-size:13px;opacity:.9}
.sp-l{display:flex;flex-direction:column;font-size:13.5px;line-height:1.25}
.sp-l small{font-size:11.5px;color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace}
.sp-empty{padding:14px;text-align:center;color:var(--dim);font-size:13px}

.live{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--sub);letter-spacing:1px;white-space:nowrap;flex:0 0 auto}
.live .pulse{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 1.6s ease-in-out infinite}
.live.warn .pulse{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.live.demo .pulse{background:var(--grey);box-shadow:0 0 8px var(--grey)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.clock{font-size:clamp(15px,1.5vw,21px);font-weight:600;color:var(--cyan);letter-spacing:1px;
  text-shadow:0 0 12px var(--cyan-d);font-variant-numeric:tabular-nums;flex:0 0 auto}
.authbtn{font-family:inherit;font-size:13px;letter-spacing:.5px;color:var(--sub);cursor:pointer;
  border:1px solid var(--line2);background:rgba(20,40,80,.4);padding:6px 13px;border-radius:8px;transition:.18s;flex:0 0 auto;white-space:nowrap}
.authbtn:hover{border-color:var(--cyan);color:var(--ink)}
.authbtn.on{border-color:var(--ok);color:var(--ok);background:rgba(46,230,166,.1)}
.dim{color:var(--dim);font-weight:400}

/* ============================ 主体容器 ============================ */
#app{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:clamp(9px,1vw,14px);overflow:auto;padding-right:2px}
#app.ov{overflow:hidden}
#app::-webkit-scrollbar,.p-body::-webkit-scrollbar,.search-pop::-webkit-scrollbar,.tk-viewport::-webkit-scrollbar{width:8px;height:8px}
#app::-webkit-scrollbar-thumb,.p-body::-webkit-scrollbar-thumb,.search-pop::-webkit-scrollbar-thumb{background:rgba(90,160,255,.28);border-radius:8px}
#app::-webkit-scrollbar-track,.p-body::-webkit-scrollbar-track{background:transparent}

/* ============================ 状态条 ============================ */
/* 探测端异常横幅：中性深色底 + 琥珀色描边，只用一条醒目提示，不做满屏红 */
.probe-warn{display:flex;align-items:flex-start;gap:12px;flex:0 0 auto;padding:11px 14px;
  border:1px solid rgba(255,176,32,.42);border-left:3px solid var(--warn);border-radius:var(--r);
  background:linear-gradient(90deg,rgba(255,176,32,.13),rgba(255,176,32,.04) 55%,rgba(255,176,32,0))}
.probe-warn .pw-ico{color:var(--warn);font-size:15px;line-height:1.5;flex:0 0 auto}
.probe-warn .pw-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.probe-warn .pw-body b{color:var(--warn);font-size:13.5px;font-weight:700;letter-spacing:.3px}
.probe-warn .pw-body span{font-size:12.5px;color:var(--sub);line-height:1.5}
.probe-warn .pw-hint{color:var(--dim);font-size:12px}
.probe-warn .pw-hint code{color:var(--cyan);background:rgba(90,170,255,.1);padding:1px 6px;border-radius:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.probe-warn .pw-time{margin-left:auto;font-size:11.5px;color:var(--dim);flex:0 0 auto;
  font-family:ui-monospace,Menlo,Consolas,monospace}
/* 已切到「服务器视角拨测」：数据是真实的，用青绿信息条而不是警告条 */
.probe-warn.info{border-color:rgba(54,224,160,.34);border-left-color:var(--ok);
  background:linear-gradient(90deg,rgba(54,224,160,.10),rgba(54,224,160,.03) 55%,rgba(54,224,160,0))}
.probe-warn.info .pw-ico,.probe-warn.info .pw-body b{color:var(--ok)}
.statusbar{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);flex:0 0 auto;
  padding:9px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);flex-wrap:wrap}
.sitem{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sub);letter-spacing:.5px;white-space:nowrap}
.sitem b{color:var(--ink);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.sitem .hl-c{color:var(--cyan)} .sitem .hl-w{color:var(--warn)} .sitem .hl-e{color:var(--err)} .sitem .hl-g{color:var(--ok)}
.vline{width:1px;height:17px;background:var(--line2);flex:0 0 auto}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}
.dot.g{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.dot.y{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.dot.r{background:var(--err);box-shadow:0 0 10px var(--err)}
.dot.c{background:var(--cyan);box-shadow:0 0 10px var(--cyan-d)}
.dot.b{background:var(--blue);box-shadow:0 0 10px var(--blue-d)}
.dot.gr{background:var(--grey);box-shadow:0 0 8px var(--grey)}

/* ============================ KPI ============================ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(9px,1vw,14px);flex:0 0 auto}
.kpi{position:relative;padding:clamp(11px,1.2vw,18px) clamp(13px,1.3vw,20px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--cyan),transparent);box-shadow:0 0 14px var(--cyan-d)}
.kpi.warn::before{background:linear-gradient(180deg,var(--warn),transparent);box-shadow:0 0 14px rgba(255,176,32,.5)}
.kpi.err::before{background:linear-gradient(180deg,var(--err),transparent);box-shadow:0 0 14px rgba(255,84,112,.5)}
.kpi .l{font-size:13px;color:var(--sub);letter-spacing:1px}
.kpi .v{font-size:clamp(24px,3vw,42px);font-weight:700;line-height:1.06;color:var(--cyan);
  text-shadow:0 0 18px var(--cyan-d);font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .v small{font-size:.45em;color:var(--dim);font-weight:600;margin-left:3px;text-shadow:none}
.kpi .v.w{color:var(--warn);text-shadow:0 0 18px rgba(255,176,32,.55)}
.kpi .v.r{color:var(--err);text-shadow:0 0 18px rgba(255,84,112,.55)}
.kpi .v.g{color:var(--ok);text-shadow:0 0 18px rgba(46,230,166,.5)}
.kpi .sub{font-size:12px;color:var(--dim);margin-top:4px;letter-spacing:.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .corner{position:absolute;right:10px;top:10px;width:10px;height:10px;
  border-top:1.5px solid var(--line2);border-right:1.5px solid var(--line2)}

/* ============================ 主栅格 ============================ */
.main{flex:1 1 auto;display:grid;grid-template-columns:1fr 1.32fr;gap:clamp(9px,1vw,14px);min-height:0}
.right-col{display:flex;flex-direction:column;gap:clamp(9px,1vw,14px);min-height:0}

.panel{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.p-hd{display:flex;align-items:center;gap:9px;padding:10px 15px;flex:0 0 auto;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(30,60,120,.18),transparent)}
.p-hd .bar{width:3px;height:14px;background:var(--cyan);box-shadow:0 0 10px var(--cyan-d);border-radius:2px}
.p-hd .t{font-size:14.5px;font-weight:700;letter-spacing:1px;color:#dcebff;white-space:nowrap}
.p-hd .meta{margin-left:auto;font-size:12px;color:var(--dim);letter-spacing:.5px;white-space:nowrap}
.p-body{flex:1 1 auto;padding:13px 15px;min-height:0;display:flex;flex-direction:column}
.p-body.scroll{overflow:auto;padding:0}
.p-body.pad0{padding:0}

/* 图表 */
.nowvals{display:flex;gap:24px;flex:0 0 auto;margin-bottom:2px}
.nv{font-size:clamp(20px,2.2vw,28px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.nv small{font-size:11.5px;color:var(--dim);font-weight:600;margin-left:3px}
.nv.c{color:var(--cyan);text-shadow:0 0 14px var(--cyan-d)}
.nv.b{color:var(--blue);text-shadow:0 0 14px var(--blue-d)}
.nv.g{color:var(--ok);text-shadow:0 0 14px rgba(46,230,166,.45)}
.chart-wrap{flex:1 1 auto;position:relative;min-height:0;margin:6px 0 4px}
svg.chart{width:100%;height:100%;display:block;overflow:visible}
.legend-row{display:flex;gap:18px;flex:0 0 auto;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:9px}
.lg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--sub)}
.lg i{width:14px;height:3px;border-radius:2px;display:inline-block;flex:0 0 auto}
.lg .c-c{background:var(--cyan);box-shadow:0 0 8px var(--cyan-d)}
.lg .c-b{background:var(--blue);box-shadow:0 0 8px var(--blue-d)}
.lg .c-g{background:var(--ok);box-shadow:0 0 8px rgba(46,230,166,.5)}
.lg b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}

/* 服务器卡片 */
.servers{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:clamp(8px,.9vw,12px);
  align-content:start;overflow:auto;min-height:0;padding:1px}
.srv{border:1px solid var(--line);border-radius:9px;padding:11px 12px;position:relative;min-height:176px;
  background:linear-gradient(180deg,rgba(24,48,94,.5),rgba(10,22,48,.35));
  display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.2s}
.srv:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(55,214,255,.22);transform:translateY(-1px)}
.srv.off{opacity:.62}
.srv.crit{border-color:rgba(255,84,112,.45)}
.srv.crit::after{content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;
  box-shadow:inset 0 0 22px rgba(255,84,112,.12)}
.srv .shd{display:flex;align-items:center;gap:8px;min-width:0}
.srv .nm{font-size:14.5px;font-weight:700;color:#e3eeff;letter-spacing:.4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srv .rg{font-size:11px;color:var(--dim);margin-left:auto;white-space:nowrap;flex:0 0 auto}
.srv .mchip{font-size:10px;color:var(--warn);border:1px solid rgba(255,176,32,.45);background:rgba(255,176,32,.12);
  padding:1px 7px;border-radius:6px;margin-left:8px;white-space:nowrap;flex:0 0 auto}
.pdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;flex:0 0 auto}
.pdot.g{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.pdot.r{background:var(--err);box-shadow:0 0 8px var(--err)}
.pdot.y{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.pdot.gr{background:var(--grey)}
.srow b.r{color:var(--err)}
.srv .host{font-size:11.5px;color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace;
  margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 8px}
.mt .k{font-size:11px;color:var(--sub);letter-spacing:.5px}
.mt .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px;color:var(--ink)}
.mt .v em{font-size:10.5px;font-style:normal;color:var(--dim);margin-left:1px}
.mt .v.c{color:var(--cyan)} .mt .v.w{color:var(--warn)} .mt .v.r{color:var(--err)} .mt .v.gr{color:var(--grey)}
.mt .bar{height:4px;border-radius:3px;background:rgba(255,255,255,.09);margin-top:5px;overflow:hidden}
.mt .bar i{display:block;height:100%;border-radius:3px;transition:width .8s ease}
.mt .bar i.g{background:var(--ok);box-shadow:0 0 8px rgba(46,230,166,.5)}
.mt .bar i.y{background:var(--warn);box-shadow:0 0 8px rgba(255,176,32,.5)}
.mt .bar i.r{background:var(--err);box-shadow:0 0 8px rgba(255,84,112,.5)}
.mt .bar i.b{background:var(--blue);box-shadow:0 0 8px var(--blue-d)}
.mt .bar i.gr{background:var(--grey)}
.srow{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--sub);
  margin-top:auto;padding-top:7px;border-top:1px solid var(--line);flex-wrap:wrap}
.srow b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.srow b.r{color:var(--err)} .srow b.y{color:var(--warn)} .srow b.g{color:var(--ok)}
.alerts{margin-top:6px;font-size:11.5px;display:flex;flex-direction:column;gap:2px}
.alerts .a{display:flex;align-items:center;gap:5px;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alerts .a.r{color:#ffc2cd} .alerts .a.y{color:#ffe2ab}

/* SSL 临期列表 */
.ssl-list{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0}
.ssl-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  border:1px solid transparent;background:rgba(12,26,54,.5);text-decoration:none;color:inherit;transition:.16s}
.ssl-row:hover{border-color:var(--line2);background:rgba(26,52,100,.55)}
.ssl-row .dm{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ssl-row .sv{font-size:11px;color:var(--dim);white-space:nowrap}
.ssl-row .dys{margin-left:auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:1px 8px;border-radius:9px;border:1px solid var(--line);white-space:nowrap;flex:0 0 auto}
.ssl-row .dys.r{color:var(--err);border-color:rgba(255,84,112,.45);background:rgba(255,84,112,.1)}
.ssl-row .dys.y{color:var(--warn);border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.1)}
.ssl-row .dys.b{color:var(--blue);border-color:rgba(91,141,239,.45);background:rgba(91,141,239,.1)}
.ssl-row .dys.g{color:var(--ok);border-color:rgba(46,230,166,.4);background:rgba(46,230,166,.08)}
.ssl-row .dys.gr{color:var(--grey);border-color:rgba(90,107,133,.4)}

/* SSL 面板底部汇总 */
.ssl-foot{display:flex;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
  font-size:12px;color:var(--dim);letter-spacing:.3px;flex:0 0 auto}
.ssl-foot b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700;margin-left:2px}
.ssl-foot b.y{color:var(--warn)} .ssl-foot b.g{color:var(--ok)}

/* ============================ 告警流 ============================ */
.ticker{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.ticker .tag{font-size:11.5px;font-weight:700;color:var(--err);letter-spacing:1px;flex:0 0 auto;
  border:1px solid rgba(255,84,112,.4);padding:2px 9px;border-radius:6px;background:rgba(255,84,112,.1)}
.tk-viewport{flex:1 1 auto;overflow:hidden;position:relative;min-width:0}
.tk-track{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:scroll 120s linear infinite;will-change:transform}
.ticker:hover .tk-track,.tk-track.paused{animation-play-state:paused}
.ticker .tag{cursor:pointer;user-select:none;transition:.15s}
.ticker .tag.paused{color:var(--warn);border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.12)}
.ticker .tag.paused::after{content:' ⏸'}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{font-size:12.5px;color:var(--sub);letter-spacing:.3px;display:inline-flex;align-items:center;gap:7px}
.tk b{color:var(--ink);font-weight:600}
.tk .r{color:#ff9aa8} .tk .y{color:#ffd27a} .tk .g{color:var(--ok)} .tk .d{color:var(--sub)}
.tk em{font-style:normal;font-size:10.5px;color:var(--dim);border:1px solid var(--line);padding:0 5px;border-radius:5px}
.tk-end{flex:0 0 auto;font-size:12px;color:var(--dim);cursor:pointer;padding:2px 8px;border-radius:6px;transition:.15s}
.tk-end:hover{color:var(--cyan);background:rgba(55,214,255,.1)}

/* ============================ 通用页面块 ============================ */
.page{display:flex;flex-direction:column;gap:clamp(9px,1vw,14px);min-height:0;flex:1 1 auto}
.page-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.page-hd h1{font-size:clamp(17px,1.8vw,22px);font-weight:700;letter-spacing:2px;color:#eaf6ff;
  text-shadow:0 0 14px rgba(55,214,255,.35)}
.page-hd .sub{font-size:12.5px;color:var(--dim);letter-spacing:.4px}
.hd-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.btn{font-family:inherit;font-size:13.5px;letter-spacing:.5px;cursor:pointer;border-radius:8px;padding:7px 14px;
  border:1px solid var(--line2);background:rgba(20,40,80,.45);color:var(--ink);transition:.2s;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.btn:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(55,214,255,.3);background:rgba(30,60,120,.5)}
.btn.primary{background:linear-gradient(180deg,var(--cyan),#1fa9d6);color:#06121f;border-color:transparent;font-weight:700;box-shadow:0 0 14px var(--cyan-d)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{border-color:rgba(255,84,112,.5);color:#ffb3bf}
.btn.danger:hover{background:rgba(255,84,112,.14);box-shadow:0 0 12px rgba(255,84,112,.3)}
.btn.sm{padding:5px 11px;font-size:12.5px}
.btn.xs{padding:3px 9px;font-size:11.5px;border-radius:6px}
.btn.ghost{border-color:var(--line);color:var(--dim);background:transparent;cursor:default}

/* 面包屑 */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);flex:0 0 auto}
.crumb a{color:var(--sub);text-decoration:none;transition:.15s}
.crumb a:hover{color:var(--cyan)}
.crumb b{color:var(--ink);font-weight:600}
.crumb span{opacity:.5}

/* 服务器详情头 */
.srv-head{display:flex;align-items:center;gap:12px;padding:12px 16px;flex:0 0 auto;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.srv-head.off{opacity:.7}
.sh-main{display:flex;align-items:center;gap:11px;min-width:0}
.srv-head h1{font-size:clamp(17px,1.8vw,21px);font-weight:700;letter-spacing:1px;color:#eaf6ff}
.sh-sub{font-size:12.5px;color:var(--dim);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sh-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* 系统状态卡 */
/* 演示数据提示条：避免把模拟曲线误当真实负载 */
.demo-note{display:flex;gap:8px;align-items:baseline;margin-bottom:10px;padding:8px 11px;border-radius:8px;
  font-size:11.5px;line-height:1.55;color:#e8c98a;background:rgba(255,176,32,.07);
  border:1px solid rgba(255,176,32,.28);border-left:3px solid var(--warn)}
.demo-note b{flex:0 0 auto;font-size:10.5px;letter-spacing:.5px;color:#ffcf6b;
  border:1px solid rgba(255,176,32,.45);border-radius:4px;padding:1px 5px;background:rgba(255,176,32,.12)}
.mcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:13px}
.mc{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:rgba(16,34,68,.5)}
.mc .k{font-size:11.5px;color:var(--sub);letter-spacing:.5px}
.mc .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;color:var(--ink)}
.mc .v em{font-size:11px;font-style:normal;color:var(--dim);margin-left:2px}
.mc .v.c{color:var(--cyan);text-shadow:0 0 12px var(--cyan-d)}
.mc .v.w{color:var(--warn)} .mc .v.r{color:var(--err)} .mc .v.gr{color:var(--grey)}
.mc .kbar{height:4px;border-radius:3px;background:rgba(255,255,255,.09);margin-top:7px;overflow:hidden}
.mc .kbar i{display:block;height:100%;border-radius:3px}
.mc .kbar i.g{background:var(--ok);box-shadow:0 0 8px rgba(46,230,166,.45)}
.mc .kbar i.y{background:var(--warn);box-shadow:0 0 8px rgba(255,176,32,.45)}
.mc .kbar i.r{background:var(--err);box-shadow:0 0 8px rgba(255,84,112,.45)}
.mc .kbar i.b{background:var(--blue);box-shadow:0 0 8px var(--blue-d)}
.mc .kbar i.gr{background:var(--grey)}

.ib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.ib{display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:8px;background:rgba(12,26,54,.45);border:1px solid var(--line)}
.ib .k{font-size:11px;color:var(--dim);letter-spacing:.4px}
.ib .v{font-size:13px;color:var(--ink);word-break:break-all}

.sv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(9px,1vw,14px);min-height:0}
.sv-grid>*{min-width:0}
/* 详情页（服务器）允许自然高度滚动，避免面板被压扁裁切 */
.page.srv{overflow-y:auto;overflow-x:hidden;padding-right:3px;scrollbar-width:thin}
.page.srv>*{flex:0 0 auto}

/* 告警行 */
.srv-alerts{display:flex;flex-direction:column;gap:7px;flex:0 0 auto}
.arow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:13px;
  border:1px solid var(--line);background:rgba(16,34,68,.5)}
.arow.lv-P0{border-color:rgba(255,84,112,.4);background:rgba(255,84,112,.08)}
.arow.lv-P1{border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.07)}
.arow.lv-P2{border-color:rgba(91,141,239,.32);background:rgba(91,141,239,.07)}
.arow.acked{opacity:.5}
.arow .atext{flex:1 1 auto;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.abadge{font-size:10.5px;font-weight:700;letter-spacing:.5px;padding:1px 7px;border-radius:5px;flex:0 0 auto}
.abadge.P0{background:rgba(255,84,112,.18);color:#ff8ea0;border:1px solid rgba(255,84,112,.45)}
.abadge.P1{background:rgba(255,176,32,.16);color:#ffc45c;border:1px solid rgba(255,176,32,.42)}
.abadge.P2{background:rgba(91,141,239,.16);color:#8fb3ff;border:1px solid rgba(91,141,239,.42)}

/* ============================ 表格 ============================ */
table.grid{width:100%;border-collapse:collapse}
table.grid th{position:sticky;top:0;z-index:2;text-align:left;font-size:11.5px;color:var(--sub);font-weight:600;letter-spacing:.5px;
  padding:9px 12px;border-bottom:1px solid var(--line2);background:#0c1a35;white-space:nowrap}
table.grid td{font-size:12.5px;color:var(--ink);padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tbody tr:hover td{background:rgba(30,62,124,.3)}
table.grid .ops{text-align:right;white-space:nowrap}
table.grid .ops .btn{margin-left:5px}
table.grid .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-2)}
.lnk{color:var(--cyan);text-decoration:none;border-bottom:1px dashed rgba(55,214,255,.35);transition:.15s}
.lnk:hover{border-bottom-color:var(--cyan);text-shadow:0 0 10px var(--cyan-d)}

.badge{font-size:11px;padding:2px 8px;border-radius:9px;border:1px solid var(--line);color:var(--sub);white-space:nowrap;display:inline-block}
.badge.g{color:var(--ok);border-color:rgba(46,230,166,.4);background:rgba(46,230,166,.08)}
.badge.y{color:var(--warn);border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.08)}
.badge.r{color:var(--err);border-color:rgba(255,84,112,.4);background:rgba(255,84,112,.08)}
.badge.gr{color:var(--grey);border-color:rgba(90,107,133,.4)}
.badge.b{color:var(--blue);border-color:rgba(91,141,239,.4);background:rgba(91,141,239,.08)}

.ssl-pill{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:9px;
  border:1px solid var(--line);font-variant-numeric:tabular-nums}
.ssl-pill.r{color:var(--err);border-color:rgba(255,84,112,.45);background:rgba(255,84,112,.1)}
.ssl-pill.y{color:var(--warn);border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.1)}
.ssl-pill.b{color:var(--blue);border-color:rgba(91,141,239,.45);background:rgba(91,141,239,.1)}
.ssl-pill.g{color:var(--ok);border-color:rgba(46,230,166,.4);background:rgba(46,230,166,.08)}
.ssl-pill.gr{color:var(--grey);border-color:rgba(90,107,133,.4)}
.ssl-date{display:block;font-size:10.5px;color:var(--dim);margin-top:2px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ============================ 网站详情 ============================ */
.site-cards{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(9px,1vw,14px);min-height:0;flex:1 1 auto}
.ssl-big{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);flex:1 1 auto;min-height:110px;flex-wrap:wrap}
.sslnone{display:flex;flex-direction:column;gap:8px}
.sslnone .x{font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--grey);letter-spacing:2px}
.sslnone small{font-size:12px;color:var(--dim);line-height:1.6;max-width:220px}
.sslnum{font-size:clamp(44px,6vw,74px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.sslnum small{font-size:.26em;font-weight:600;margin-left:5px;letter-spacing:1px;opacity:.85}
.sslnum.r{color:var(--err);text-shadow:0 0 34px rgba(255,84,112,.5)}
.sslnum.y{color:var(--warn);text-shadow:0 0 34px rgba(255,176,32,.5)}
.sslnum.b{color:var(--blue);text-shadow:0 0 34px var(--blue-d)}
.sslnum.g{color:var(--ok);text-shadow:0 0 34px rgba(46,230,166,.45)}
.sslnum.gr{color:var(--grey)}
.sslinfo{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:180px}
.sslinfo>div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--line);padding-bottom:6px;font-size:13px}
.sslinfo .k{color:var(--dim);font-size:12.5px}
.sslinfo b{color:var(--ink);font-variant-numeric:tabular-nums}
.sslinfo b.r{color:var(--err)} .sslinfo b.y{color:var(--warn)} .sslinfo b.b{color:var(--blue)} .sslinfo b.g{color:var(--ok)} .sslinfo b.gr{color:var(--grey)}
.ssl-track{height:9px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;position:relative;margin-top:12px}
.ssl-track i{display:block;height:100%;border-radius:6px;transition:width .9s ease}
.ssl-track i.r{background:linear-gradient(90deg,rgba(255,84,112,.55),var(--err));box-shadow:0 0 12px rgba(255,84,112,.5)}
.ssl-track i.y{background:linear-gradient(90deg,rgba(255,176,32,.5),var(--warn));box-shadow:0 0 12px rgba(255,176,32,.45)}
.ssl-track i.b{background:linear-gradient(90deg,rgba(91,141,239,.5),var(--blue));box-shadow:0 0 12px var(--blue-d)}
.ssl-track i.g{background:linear-gradient(90deg,rgba(46,230,166,.5),var(--ok));box-shadow:0 0 12px rgba(46,230,166,.4)}
.ssl-track i.gr{background:var(--grey)}
.ssl-legend{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:6px}

.stat-lines{display:flex;flex-direction:column;gap:0;flex:1 1 auto}
.sl{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px dashed var(--line);font-size:13px}
.sl:last-child{border-bottom:none}
.sl .k{color:var(--dim);font-size:12.5px}
.sl .v{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;word-break:break-all}
.sl .v.g{color:var(--ok)} .sl .v.r{color:var(--err)} .sl .v.gr{color:var(--grey)}
.tip-note{font-size:12px;color:var(--dim);line-height:1.65;border-top:1px solid var(--line);padding-top:9px;margin-top:auto}

/* ============================ 管理 / 数据源 ============================ */
.cfg-body,.admin-body{display:grid;grid-template-columns:320px 1fr;gap:clamp(9px,1vw,14px);min-height:0;flex:1 1 auto}
.srv-item{border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin:7px;cursor:pointer;transition:.18s;
  background:rgba(12,26,54,.5)}
.srv-item:hover{border-color:var(--line2);background:rgba(24,48,94,.5)}
.srv-item.sel{border-color:var(--cyan);box-shadow:0 0 14px rgba(55,214,255,.25);background:rgba(24,52,104,.6)}
.srv-item .nm{font-size:14px;font-weight:700;color:#e3eeff;display:flex;align-items:center;gap:8px}
.srv-item .meta{font-size:11.5px;color:var(--dim);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.d-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.d-head .nm{font-size:18px;font-weight:700;color:#eaf6ff;letter-spacing:.5px}
.d-head .acts{margin-left:auto;display:flex;gap:8px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 16px;margin-bottom:14px}
.info-grid .it .k{font-size:11.5px;color:var(--dim);letter-spacing:.5px}
.info-grid .it .v{font-size:13px;color:var(--ink);margin-top:2px;word-break:break-all}
.subtabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:12px}
.subtabs button{font-family:inherit;font-size:13.5px;color:var(--sub);background:transparent;border:none;
  border-bottom:2px solid transparent;padding:7px 4px;margin-bottom:-1px;cursor:pointer;letter-spacing:.5px;transition:.15s}
.subtabs button:hover{color:var(--ink)}
.subtabs button.on{color:var(--cyan);border-bottom-color:var(--cyan);font-weight:700}

.src3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(9px,1vw,14px);align-items:start}
.src-desc{font-size:12.5px;color:var(--sub);line-height:1.7;margin-bottom:11px}
.sf{margin-bottom:10px}
.sf label{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;letter-spacing:.4px}
.sf input{width:100%;font-family:inherit;font-size:13px;color:var(--ink);background:rgba(7,14,32,.7);
  border:1px solid var(--line2);border-radius:7px;padding:8px 10px;outline:none;transition:.15s}
.sf input:focus{border-color:var(--cyan);box-shadow:0 0 10px rgba(55,214,255,.25)}
.oncall-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
.oncall-row input{flex:1 1 120px;min-width:0;font-family:inherit;font-size:13px;color:var(--ink);
  background:rgba(7,14,32,.75);border:1px solid var(--line2);border-radius:7px;padding:7px 9px;outline:none}
.oncall-row input:focus{border-color:var(--cyan)}
.sf input::placeholder{color:var(--dim)}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--ink-2);
  background:rgba(5,11,26,.85);border:1px solid var(--line);border-radius:7px;padding:8px 10px;
  word-break:break-all;line-height:1.6;max-height:96px;overflow:auto}
.src-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.probe-res{font-size:12px;color:var(--dim)}
.probe-res.ok{color:var(--ok)} .probe-res.err{color:var(--err)}
.src-foot{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding-top:2px}
.src-foot .hint{font-size:12px;color:var(--dim)}

.empty{padding:26px;text-align:center;color:var(--dim);font-size:13px;line-height:1.7}
.empty a{color:var(--cyan)}
.hd-note{font-size:12px;color:var(--dim)}

/* ============================ 弹窗 ============================ */
.mask{position:fixed;inset:0;background:rgba(3,8,20,.74);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:50}
.mask.on{display:flex}
.modal{width:min(520px,92vw);border:1px solid var(--line2);border-radius:14px;
  background:linear-gradient(180deg,#0f2247,#0a1730);box-shadow:0 0 44px rgba(20,80,160,.45);overflow:hidden}
.m-hd{padding:13px 18px;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:700;color:#eaf6ff;
  letter-spacing:1px;display:flex;align-items:center;gap:10px}
.m-hd .bar{width:3px;height:15px;background:var(--cyan);box-shadow:0 0 10px var(--cyan-d);border-radius:2px}
.m-body{padding:16px 18px;max-height:60vh;overflow:auto}
.m-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:5px;letter-spacing:.4px}
.field label .req{color:var(--err);margin-left:3px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:rgba(7,14,32,.75);border:1px solid var(--line2);border-radius:8px;padding:9px 11px;outline:none;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 10px rgba(55,214,255,.25)}
.field textarea{resize:vertical;min-height:56px}
.field .err{color:var(--err);font-size:11.5px;margin-top:4px;display:none}
.field.invalid input,.field.invalid select{border-color:var(--err)}
.field.invalid .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* toast */
.toast{position:fixed;left:50%;bottom:64px;transform:translateX(-50%) translateY(16px);opacity:0;
  background:rgba(13,30,64,.97);border:1px solid var(--line2);color:var(--ink);padding:10px 20px;border-radius:10px;
  font-size:13.5px;letter-spacing:.4px;z-index:80;transition:.28s;box-shadow:0 0 26px rgba(20,80,160,.45);pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(46,230,166,.55)} .toast.err{border-color:rgba(255,84,112,.55)}

/* ============================ 响应式 ============================ */
@media (max-width:1400px){
  .main{grid-template-columns:1fr 1.2fr}
}
@media (max-width:1180px){
  .main{grid-template-columns:1fr;grid-template-rows:minmax(220px,.9fr) 1fr}
  .sv-grid{grid-template-columns:1fr}
  .site-cards{grid-template-columns:1fr}
  .cfg-body,.admin-body{grid-template-columns:260px 1fr}
  .brand .sub{display:none}
  .nav{margin-left:10px}
  .nav button{padding:6px 11px;font-size:13px}
}
@media (max-width:900px){
  body{overflow:auto}
  .screen{height:auto;min-height:100vh}
  #app{overflow:visible}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .header{flex-wrap:wrap}
  .search-wrap{order:9;flex:1 1 100%}
  .cfg-body,.admin-body{grid-template-columns:1fr}
  .ticker{position:sticky;bottom:0}
}

/* ==================== 折线图 / 趋势分析 ==================== */
.ch-wrap{position:relative;padding:2px 0 0}
.ch-svg{display:block;width:100%;height:auto;min-height:150px}
.ch-ax{fill:var(--dim);font-size:10px;font-family:ui-monospace,Menlo,Consolas,monospace}
.ch-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;padding-left:6px}
.ch-lg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2)}
.ch-lg i{width:14px;height:3px;border-radius:2px;display:inline-block}
.ch-peak{font-size:9.5px;font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace;paint-order:stroke}
.mini-hd{font-size:12px;color:var(--ink-2);margin:2px 0 6px;font-weight:600;letter-spacing:.3px}
.trend-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.trend-bar .seg{display:flex;gap:6px}
.trend-bar select.inp{background:rgba(10,20,42,.9);border:1px solid var(--line2);color:var(--ink);
  border-radius:8px;padding:5px 9px;font-size:12.5px;outline:none}
.page-hd .btn.sm{margin-left:auto}
td.nowrap,th.nowrap{white-space:nowrap}
/* 站点服务明细：到期列紧凑 */
.grid td .ssl-pill{white-space:nowrap}
/* 图表容器：避免被 flex 面板压扁 */
.ch-wrap{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center}
.ch-svg{flex:0 0 auto;width:100%;height:auto}
.p-body>.ch-wrap{min-height:0}
/* 可滚动页面（图表页需要自然高度，不能被 flex 压扁） */
.page.tall{overflow-y:auto;overflow-x:hidden;padding-right:3px;scrollbar-width:thin}
.page.tall>*{flex:0 0 auto}
.page.tall .ch-svg{min-height:190px}

/* ==================== 告警趋势 · 堆叠柱状图 ==================== */
.ab-range{display:flex;gap:6px;margin-left:12px;flex:0 0 auto}
.ab-wrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.ab-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ab-main{display:flex;align-items:baseline;gap:5px;margin-right:4px}
.ab-main em{font-style:normal;font-size:26px;font-weight:800;line-height:1;color:#e9eef5;
  font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:-.5px}
.ab-main span{font-size:11.5px;color:var(--dim)}
.ab-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);white-space:nowrap;
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.ab-pill b{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;color:var(--ink)}
.ab-pill.p0{border-color:rgba(255,92,122,.34)} .ab-pill.p0 b{color:#ff5c7a}
.ab-pill.p1{border-color:rgba(255,180,58,.32)} .ab-pill.p1 b{color:#ffb43a}
.ab-pill.p2{border-color:rgba(155,140,255,.32)} .ab-pill.p2 b{color:#9b8cff}
.ab-peak{margin-left:auto;font-size:11.5px;color:var(--dim);white-space:nowrap}
.ab-plot{position:relative;min-width:0}
.ab-plot .ch-svg{display:block;width:100%;height:auto}
.ab-tip{position:absolute;transform:translate(-50%,-100%);z-index:6;pointer-events:none;white-space:nowrap;
  background:rgba(8,14,26,.97);border:1px solid rgba(125,150,185,.34);border-radius:9px;padding:7px 10px;
  font-size:11.5px;line-height:1.65;color:var(--ink-2);box-shadow:0 10px 28px rgba(0,0,0,.55)}
.ab-tip-h{font-weight:700;color:#dcebff;letter-spacing:.4px;font-family:ui-monospace,Menlo,Consolas,monospace}
.ab-tip .lv{margin-right:9px}
.ab-tip .lv b{font-family:ui-monospace,Menlo,Consolas,monospace}
.ab-tip .lv.dim{color:var(--dim)}
.ab-tip-f{margin-top:4px;padding-top:4px;border-top:1px solid rgba(125,150,185,.2);color:var(--dim)}
.ab-tip-f b{color:#e9eef5;font-family:ui-monospace,Menlo,Consolas,monospace}
.ab-hit{cursor:crosshair}
.ab-col rect{transition:filter .12s}
.ab-col.on rect{filter:brightness(1.45) drop-shadow(0 0 5px rgba(120,200,255,.45))}
.ab-v{fill:var(--ink-2);font-size:9.5px;font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace}
.ch-lg b{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink);margin-left:1px}
.ab-hint{margin-left:auto;font-size:11px;color:var(--dim)}
.ab-none{display:flex;align-items:center;gap:12px;padding:24px 6px}
.ab-none .ok-mark{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:700;color:var(--ok);background:rgba(46,230,166,.10);border:1px solid rgba(46,230,166,.34)}
.ab-none b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.ab-none .hd-note{display:block}
/* 告警页：图表下方两块面板撑满剩余高度，别在 1080 屏上留半屏空白 */
.page.tall .alerts-main{flex:1 1 auto;min-height:300px;align-items:stretch}
.page.tall .alerts-main>.panel{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.page.tall .alerts-main>.panel>.p-body{min-height:0;overflow-y:auto;scrollbar-width:thin}

/* ==================== 站点部署 ==================== */
select.inp{width:100%;font-family:inherit;font-size:13px;color:var(--ink);background:rgba(7,14,32,.7);
  border:1px solid var(--line2);border-radius:8px;padding:8px 10px;outline:none}
select.inp:focus{border-color:var(--cyan);box-shadow:0 0 10px rgba(55,214,255,.25)}
.sf input[type=file]{padding:6px 8px;font-size:12px;color:var(--ink-2)}
.sf input[type=file]::file-selector-button{font-family:inherit;font-size:12px;color:#06121f;font-weight:700;
  background:linear-gradient(180deg,var(--cyan),#1fa9d6);border:0;border-radius:6px;padding:5px 10px;margin-right:9px;cursor:pointer}
.dp-bar{height:4px;background:rgba(255,255,255,.07);border-radius:3px;margin-top:10px;overflow:hidden}
.dp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#2ee6a8);transition:width .25s}
.dlog{margin:0;padding:10px 12px;max-height:230px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11.5px;line-height:1.7;color:var(--ink-2);background:rgba(4,10,22,.7);border:1px solid var(--line);
  border-radius:9px;white-space:pre-wrap;word-break:break-all}

/* ==================== 通用别名（badge ok / err / warn） ==================== */
.badge.ok{color:var(--ok);border-color:rgba(46,230,166,.4);background:rgba(46,230,166,.08)}
.badge.err{color:var(--err);border-color:rgba(255,84,112,.4);background:rgba(255,84,112,.08)}
.badge.warn{color:var(--warn);border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.08)}
.warnc{color:var(--warn)}

/* ==================== 部署目标选择 ==================== */
.dp-target{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.dp-tinfo{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-2);min-width:220px;padding-bottom:2px}
.dp-tinfo .tinfo-line{color:var(--sub)}
.dp-tinfo .tinfo-line.dim{color:var(--dim)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ==================== 部署：版本历史 + 变更预览 ==================== */
.ver-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.ver-card{padding:12px 13px;border-radius:11px;border:1px solid var(--line);
  background:rgba(13,22,40,.66);display:flex;flex-direction:column;gap:7px}
.ver-id{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--cyan);display:flex;align-items:center;gap:8px}
.ver-meta{font-size:11.5px;color:var(--sub)}
.ver-acts{margin-top:2px}
.dp-plan{margin-top:12px;padding:13px 14px;border-radius:11px;border:1px solid var(--line);
  background:rgba(9,19,42,.6);display:flex;flex-direction:column;gap:8px}
.dp-plan-hd{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.4px}
.dp-plan-note{font-size:12px;color:var(--ink-2)}
.dp-plan-sub{font-size:11.5px;color:var(--dim);margin-top:2px}
.dp-plan .warnc{color:#ffb020;font-size:12px}
.diff{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.55;
  border-radius:8px;overflow:hidden;background:rgba(5,10,22,.7);border:1px solid var(--line)}
.diff-line{padding:1px 11px;white-space:pre-wrap;word-break:break-all;color:var(--sub)}
.diff-line .dt{display:inline-block;width:14px;opacity:.6}
.diff-line.ctx{color:var(--dim)}
.diff-line.add{color:#5fe3a1;background:rgba(54,224,160,.09)}
.diff-line.del{color:#ff7d97;background:rgba(255,84,112,.10)}

/* ==================== 趋势分析说明条 ==================== */
.trend-note{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:10px;
  border:1px solid var(--line);background:rgba(12,26,54,.55);font-size:12.5px;color:var(--ink-2);flex:0 0 auto}
.trend-note b{color:var(--cyan);letter-spacing:1px}
.trend-note .dim{color:var(--dim)}
.p-hd .hd-note{font-size:11.5px;color:var(--dim);font-weight:400;letter-spacing:0}

/* ==================== 能力中心 ==================== */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;flex:0 0 auto}
.cap-card{position:relative;padding:13px 14px 12px;border-radius:11px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(16,34,68,.72),rgba(9,19,42,.72));display:flex;flex-direction:column;gap:7px;
  transition:.18s}
.cap-card:hover{border-color:var(--line2);box-shadow:0 6px 22px rgba(0,0,0,.28);transform:translateY(-1px)}
.cap-hd{display:flex;align-items:center;gap:8px}
.cap-ico{font-size:16px;line-height:1}
.cap-t{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.4px}
.cap-hd .badge{margin-left:auto}
.cap-d{font-size:12px;line-height:1.65;color:var(--sub)}
.cap-go{align-self:flex-start;font-size:11.5px;color:var(--cyan);text-decoration:none;border-bottom:1px dashed var(--cyan-d);padding-bottom:1px}
.cap-go:hover{color:#8ae6ff}
.heal-log-wrap{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.heal-log{display:flex;gap:8px;align-items:baseline;font-size:11.5px;color:var(--ink-2);
  padding:5px 9px;border-radius:7px;background:rgba(8,16,36,.6);border-left:2px solid var(--line2)}
.heal-log.ok{border-left-color:var(--ok)}
.heal-log.err{border-left-color:var(--err)}
.heal-log .dim{color:var(--dim);margin-left:auto;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 配置管理 CMDB 标签 */
.cmdb-tag{font-size:12px;font-weight:600;letter-spacing:1px;color:#06121f;background:linear-gradient(180deg,var(--cyan),#1fa9d6);
  padding:2px 9px;border-radius:8px;margin-left:8px;vertical-align:middle;box-shadow:0 0 12px var(--cyan-d)}
.page-hd .sub{color:var(--sub)}

/* ==================== 安全防护中心 ==================== */
.sec-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;flex:0 0 auto}
.sec-kpis .kpi{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px 14px}
.sec-kpis .kpi .n{font-size:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.sec-kpis .kpi .n.r{color:var(--err)} .sec-kpis .kpi .n.y{color:var(--warn)}
.sec-kpis .kpi .l{font-size:12px;color:var(--dim);margin-top:3px}
.sec-tabs{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.sec-tab{font-size:13px;padding:6px 14px;border-radius:9px;border:1px solid var(--line);background:rgba(16,34,68,.5);color:var(--sub);cursor:pointer;transition:.15s}
.sec-tab:hover{color:var(--ink);border-color:rgba(55,214,255,.35)}
.sec-tab.on{background:rgba(54,224,160,.12);border-color:rgba(54,224,160,.4);color:#bff3df}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;flex:0 0 auto;align-items:stretch}
.sec-srv{border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,rgba(16,34,68,.72),rgba(9,19,42,.72));padding:13px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sec-srv-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.sec-srv-hd b{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.sec-srv-hd .mono{font-size:11.5px;color:var(--dim);flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-srv-hd .btn{flex:0 0 auto;white-space:nowrap}
.sec-srv-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.sec-tally{display:flex;flex-direction:column;gap:2px;font-size:11.5px;text-align:right;line-height:1.35}
.sec-tally .ok{color:var(--ok)} .sec-tally .bad{color:var(--err)}
.sec-items{display:flex;flex-direction:column;gap:5px;flex:1 1 auto}
.sec-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);min-width:0}
.sec-item .lv{flex:0 0 auto;font-size:10px;font-weight:700;padding:1px 5px;border-radius:5px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.sec-item .lv.r{background:rgba(255,84,112,.15);color:#ffc2cd;border:1px solid rgba(255,84,112,.32)}
.sec-item .lv.y{background:rgba(255,176,32,.15);color:#ffe2ad;border:1px solid rgba(255,176,32,.32)}
.sec-item .lv.b{background:rgba(63,184,224,.14);color:#bfe9ff;border:1px solid rgba(63,184,224,.3)}
.sec-item .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sec-item .dt{margin-left:auto;color:var(--dim);font-size:11px;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.sec-items .more{font-size:11.5px;color:var(--dim)}
/* 待整改汇总：铺满页面剩余高度，表体内部滚动，避免下方大片空白 */
.page.tall .sec-todo{flex:1 1 auto;min-height:240px;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.sec-todo-hd{display:flex;align-items:baseline;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.sec-todo-hd b{font-size:13.5px;color:var(--ink);letter-spacing:.3px}
.sec-todo-hd .dim{font-size:12px;color:var(--dim)}
.sec-todo-hd .sp{margin-left:auto;font-size:11.5px;color:var(--dim)}
.sec-todo-body{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}
.sec-todo-body::-webkit-scrollbar{width:9px;height:9px}
.sec-todo-body::-webkit-scrollbar-thumb{background:rgba(125,145,165,.3);border-radius:5px}
.sec-todo-body::-webkit-scrollbar-track{background:transparent}
.sec-todo-body table.grid{width:100%}
.sec-todo-body table.grid td{white-space:normal}
/* 安全页通用卡片容器：此前 .card 无任何样式，导致防护项 / 威胁流 / 封禁名单 / 响应规则
   的内容裸贴在背景上，和其他页签的面板风格不一致 */
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:13px 14px;min-width:0}
/* 内容短（空列表 / 少量行）的卡片撑满剩余高度，空状态居中，避免页面下方一大片空白 */
.page.tall .sec-fillcard{flex:1 1 auto;min-height:240px;display:flex;flex-direction:column}
.sec-empty-fill{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:26px 12px;font-size:13.5px;color:var(--ink-2);text-align:center}
.sec-empty-fill .dim{font-size:12px;color:var(--dim);line-height:1.7;max-width:460px}
.sec-score{display:flex;align-items:baseline;gap:6px}
.sec-score .n{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.sec-score .n.g{color:var(--ok)} .sec-score .n.y{color:var(--warn)} .sec-score .n.r{color:var(--err)} .sec-score .n.gr{color:var(--grey)}
.sec-score .dim{font-size:12px;color:var(--dim)}
.sec-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.sec-bar>i{display:block;height:100%;border-radius:4px;background:var(--ok)}
.sec-bar>i.y{background:var(--warn)} .sec-bar>i.r{background:var(--err)} .sec-bar>i.gr{background:var(--grey)}
.sec-srv-ft{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.sec-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sec-row select,.sec-row input{padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(8,18,34,.9);color:var(--ink);font-size:13px}
.sec-form{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
.sec-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--dim)}
.sec-form input{padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(8,18,34,.9);color:var(--ink);font-size:13px;width:150px}
.sec-sw{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer}
code.adv{font-size:11.5px;background:rgba(125,145,165,.12);padding:2px 7px;border-radius:6px;color:#bfe9d6;cursor:help;white-space:nowrap}

/* ===== Web 风控 ===== */
.sec-web-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:12px 0 4px}
.sec-web-cat{border:1px solid var(--line);border-radius:11px;background:rgba(16,34,68,.55);padding:11px 12px;text-align:center}
.sec-web-cat .n{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1}
.sec-web-cat .n.r{color:var(--err)} .sec-web-cat .n.y{color:var(--warn)} .sec-web-cat .n.b{color:var(--blue)}
.sec-web-cat .l{font-size:12px;color:var(--dim);margin-top:4px}
.sec-sub{font-size:13px;color:#9fd9ff;margin:14px 0 6px;font-weight:600}
.atk-tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:20px;margin:0 4px 4px 0;white-space:nowrap}
.atk-tag.r{background:rgba(255,84,112,.12);border:1px solid rgba(255,84,112,.3);color:#ffc2cd}
.atk-tag.y{background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.3);color:#ffe2ad}
.atk-tag.b{background:rgba(63,184,224,.12);border:1px solid rgba(63,184,224,.3);color:#bfe9ff}

/* ===== 端口变化 ===== */
.sec-port-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:4px;align-items:stretch}
.sec-port-card{border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,rgba(16,34,68,.72),rgba(9,19,42,.72));padding:13px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden}
.sec-port-stat{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.sec-port-stat .bad{color:#ffc2cd}
.sec-port-row{display:flex;gap:10px;font-size:13px;align-items:flex-start;min-width:0}
.sec-port-row>.k{flex:0 0 64px;padding-top:2px;font-size:12px;color:var(--dim)}
.port-wrap{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.port{font-size:12px;padding:2px 9px;border-radius:8px;border:1px solid rgba(125,145,165,.25);background:rgba(125,145,165,.1);color:#cdd6e2;font-variant-numeric:tabular-nums;white-space:nowrap}
.port.warn{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.12);color:#ffe2ad}
.port.bad{border-color:rgba(255,84,112,.5);background:rgba(255,84,112,.15);color:#ffc2cd;font-weight:600}
.port.off{border-color:rgba(125,145,165,.18);background:transparent;color:var(--dim);text-decoration:line-through}
.port.more{border-style:dashed;color:var(--dim);background:transparent}
.sec-port-warn{font-size:12.5px;color:#ffc2cd;background:rgba(255,84,112,.1);border:1px solid rgba(255,84,112,.3);border-radius:8px;padding:6px 10px}
.sec-srv-note{display:flex;flex-wrap:wrap;gap:6px}
.sec-srv-note .bad{font-size:11px;padding:1px 8px;border-radius:20px;background:rgba(255,84,112,.14);color:#ffc2cd;border:1px solid rgba(255,84,112,.3)}
.sec-srv-note .warn{font-size:11px;padding:1px 8px;border-radius:20px;background:rgba(255,176,32,.14);color:#ffe2ad;border:1px solid rgba(255,176,32,.3)}

/* ===== SSL 证书管理 ===== */
.certs{display:flex;flex-direction:column;gap:14px}
.cert-body{display:flex;flex-direction:column;gap:14px}
.sec-kpi{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px 14px}
.sec-kpi .n{font-size:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.sec-kpi .n.c{color:#37d6ff} .sec-kpi .n.r{color:var(--err)} .sec-kpi .n.y{color:var(--warn)} .sec-kpi .n.g{color:var(--ok)}
.sec-kpi .t{font-size:12px;color:var(--dim);margin-top:3px}
.sec-tab-fill{flex:1 1 auto}
.cert-grid td .mono{font-size:12px}
.row-crit{background:rgba(255,84,112,.06)}
.row-crit:hover{background:rgba(255,84,112,.12)}
.cert-grid tr{cursor:pointer}
.muted{color:var(--dim);font-size:12px}
.small{font-size:11.5px}
.mono{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace)}
.ssl-deep{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px 16px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.ssl-deep .sd{display:flex;flex-direction:column;gap:3px}
.ssl-deep .sd-full{grid-column:1/-1}
.ssl-deep .k{font-size:11.5px;color:var(--dim)}
.ssl-deep b{font-size:13px;color:var(--ink);font-weight:600;word-break:break-word}
.ssl-deep b.warn{color:var(--warn)} .ssl-deep small.warn{color:var(--warn);font-size:11.5px;display:block}
/* 证书详情抽屉 */
.modal-mask{position:fixed;inset:0;background:rgba(4,9,18,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}
.cert-modal{width:min(680px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--line2);border-radius:14px;background:var(--panel);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.cert-modal .m-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.cert-modal .m-head h3{font-size:16px;color:var(--ink);margin:0}
.cert-modal .x{background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer;line-height:1}
.cert-modal .x:hover{color:var(--err)}
.cert-modal .m-body{padding:16px 18px;display:flex;flex-direction:column;gap:16px}
.cert-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 18px}
.cert-summary>div{display:flex;flex-direction:column;gap:3px}
.cert-summary .k{font-size:11.5px;color:var(--dim)}
.cert-summary b{font-size:13.5px;color:var(--ink);font-weight:600;word-break:break-word}
.cert-section{display:flex;flex-direction:column;gap:6px}
.cert-section .lbl{font-size:12px;color:var(--sub);font-weight:600;letter-spacing:.4px}
.san-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.san-list li{font-size:12px;background:rgba(55,214,255,.08);border:1px solid rgba(55,214,255,.25);color:#bfeaff;padding:2px 9px;border-radius:8px}
.san-list li.muted{background:rgba(90,107,133,.12);border-color:var(--line);color:var(--dim)}
.reason-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.bad-dot{position:relative;padding-left:16px;font-size:12.5px;color:var(--ink)}
.bad-dot::before{content:'';position:absolute;left:2px;top:6px;width:7px;height:7px;border-radius:50%}
.bad-dot.r::before{background:var(--err);box-shadow:0 0 8px var(--err)}
.bad-dot.g::before{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.chain-box{font-size:13px}
.chain-ok{color:var(--ok)} .chain-bad{color:var(--err)}
.chain-meter{display:flex;align-items:center;gap:10px}
.chain-meter .cm-bar{flex:0 0 140px;height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.chain-meter .cm-bar i{display:block;height:100%;border-radius:5px;transition:width .6s ease}
.chain-meter .cm-bar i.g{background:var(--ok)} .chain-meter .cm-bar i.r{background:var(--err)}
.cert-actions{display:flex;gap:10px;flex-wrap:wrap}
.cert-log{white-space:pre-wrap;font-family:var(--mono,monospace);font-size:11.5px;color:var(--sub);background:rgba(5,12,24,.6);border:1px solid var(--line);border-radius:9px;padding:10px 12px;max-height:200px;overflow:auto;display:none}
.cert-log:not(:empty){display:block}

/* ==================== 日志检索 ==================== */
/* KPI 数值：日志页用 .n（区别于趋势页的 .v） */
.kpi .n{font-size:clamp(24px,3vw,42px);font-weight:700;line-height:1.06;color:var(--cyan);
  text-shadow:0 0 18px var(--cyan-d);font-variant-numeric:tabular-nums;margin-top:2px;min-height:1.06em}
.kpi .n.w{color:var(--warn);text-shadow:0 0 18px rgba(255,176,32,.55)}
.kpi .n.r{color:var(--err);text-shadow:0 0 18px rgba(255,84,112,.55)}
.kpi .n.g{color:var(--ok);text-shadow:0 0 18px rgba(46,230,166,.5)}
.kpi .n.empty{color:var(--grey);text-shadow:none}

/* 通用输入控件（筛选条用 .inp，覆盖 select / input 两种标签） */
.inp{font-family:inherit;font-size:13px;color:var(--ink);background:rgba(7,14,32,.7);
  border:1px solid var(--line2);border-radius:8px;padding:7px 10px;outline:none;transition:.15s}
.inp:focus{border-color:var(--cyan);box-shadow:0 0 10px rgba(55,214,255,.25)}
.inp::placeholder{color:var(--dim)}

/* 筛选条 */
.log-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;flex:0 0 auto;
  padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.log-bar .seg{display:inline-flex;gap:6px;align-items:center}
.log-bar .inp{flex:0 0 auto}

/* 主机采集状态条 */
.log-hosts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto;
  padding:9px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.log-hosts .dim.small{margin-left:auto;text-align:right}
.log-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;background:rgba(16,34,68,.5);white-space:nowrap;cursor:default}
.log-chip b{color:var(--cyan);font-weight:700}
.log-chip small{font-size:10.5px}
.log-chip.bad{border-color:rgba(255,84,112,.45);background:rgba(255,84,112,.1);color:#ffc2cd}
.log-chip.bad b{color:var(--err)}

/* 日志表格：长路径 / UA / 错误指纹 单元格防撑爆 */
.log-grid{font-variant-numeric:tabular-nums}
.log-grid td.mono.pathcell,.log-grid td.mono.uacell,.log-grid td.small.fp,
.log-grid td.pathcell,.log-grid td.uacell,.log-grid td.fp{
  max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-grid td.fp{max-width:360px}
.log-grid td.uacell{max-width:200px}


/* =========================================================================
 * 界面层安全防护（v2）
 * 设计原则：防护状态"可见"、高危操作"可拦"、后果影响"可读"。
 * ========================================================================= */

/* 顶部防护状态条：只读模式 / 会话剩余 / 备份新鲜度，一眼可见 */
.guard-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto;
  padding:8px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.guard-bar .gitem{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.guard-bar .gitem b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.guard-bar .gitem i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px currentColor;flex:0 0 auto}
.guard-bar .gitem.warn i{background:var(--warn)} .guard-bar .gitem.warn b{color:var(--warn)}
.guard-bar .gitem.bad i{background:var(--err)} .guard-bar .gitem.bad b{color:var(--err)}
.guard-bar .sp{margin-left:auto}

/* 只读模式：全局横幅 + 写按钮统一置灰 */
.ro-banner{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r);
  border:1px solid rgba(255,176,32,.45);background:rgba(255,176,32,.1);color:#ffd79a;font-size:13px;flex:0 0 auto}
.ro-banner b{color:var(--warn)}
.ro-banner .btn{margin-left:auto}
body.readonly .btn.danger:not(.ro-allow),body.readonly .btn.primary:not(.ro-allow){opacity:.4;pointer-events:none}

/* 开关 */
.sw{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13px;color:var(--ink-2)}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .track{width:38px;height:21px;border-radius:11px;background:rgba(125,145,165,.25);border:1px solid var(--line);
  transition:.18s;position:relative;flex:0 0 auto}
.sw .track::after{content:"";position:absolute;left:2px;top:1.5px;width:16px;height:16px;border-radius:50%;
  background:#8fa4bd;transition:.18s}
.sw input:checked + .track{background:rgba(255,176,32,.28);border-color:rgba(255,176,32,.5)}
.sw input:checked + .track::after{left:18px;background:var(--warn);box-shadow:0 0 10px rgba(255,176,32,.7)}

/* 危险操作确认框：把"会发生什么"写清楚，再让人动手 */
.dg{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.dg-target{font-size:14px;color:var(--ink);font-weight:700;padding:9px 12px;border-radius:9px;
  border:1px solid rgba(255,84,112,.35);background:rgba(255,84,112,.08);overflow-wrap:anywhere}
.dg-desc{font-size:13px;color:var(--ink-2);line-height:1.75}
.dg-warn{margin:0;padding-left:18px;font-size:12.5px;color:#ffc2cd;line-height:1.9}
.dg-warn li::marker{color:var(--err)}
.dg-note{font-size:12px;color:var(--dim);border-top:1px dashed var(--line);padding-top:8px}
.dg code{font-family:var(--mono,ui-monospace,monospace);color:var(--warn);background:rgba(255,176,32,.1);
  padding:1px 5px;border-radius:4px}

/* 面板自身防护卡 */
.guard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;flex:0 0 auto}
.guard-card{border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,rgba(16,34,68,.72),rgba(9,19,42,.72));
  padding:13px 15px;display:flex;flex-direction:column;gap:9px;min-width:0}
.guard-card h4{margin:0;font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:8px;
  font-weight:700;letter-spacing:.3px;min-width:0}
.guard-card h4 .badge{margin-left:auto;flex:0 0 auto}
.guard-kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--sub);
  padding:5px 0;border-bottom:1px dashed rgba(125,145,165,.12);min-width:0}
.guard-kv:last-child{border-bottom:0}
.guard-kv b{color:var(--ink);font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}
.guard-kv b.ok{color:var(--ok)} .guard-kv b.warn{color:var(--warn)} .guard-kv b.bad{color:var(--err)}
.guard-tip{font-size:12px;color:var(--dim);line-height:1.7}

/* 审计表 */
.audit-grid td{font-variant-numeric:tabular-nums;white-space:nowrap}
.audit-grid td.act{white-space:normal;min-width:120px}
.audit-grid td.path{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.audit-grid tr.fail td{background:rgba(255,84,112,.06)}
/* 用户管理表 */
.users-grid td .btn{margin-right:4px}
.users-grid td .btn[disabled]{opacity:.35;pointer-events:none}
.sel.sm{padding:5px 8px;border-radius:8px;background:rgba(16,28,52,.6);color:var(--ink);
  border:1px solid var(--line);font-size:12.5px;max-width:160px}

/* 备份列表 */
.bk-list{display:flex;flex-direction:column;gap:8px;min-height:0}
.bk-row{display:grid;grid-template-columns:170px 92px 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(16,28,52,.5);min-width:0}
.bk-row:hover{border-color:rgba(55,214,255,.3)}
.bk-row .t{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.bk-row .t small{display:block;font-size:11px;color:var(--dim);margin-top:2px}
.bk-row .sz{font-size:12.5px;color:var(--sub);text-align:right;font-variant-numeric:tabular-nums}
.bk-row .sz small{display:block;font-size:11px;color:var(--dim)}
.bk-row .ops{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bk-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;flex:0 0 auto;margin-bottom:12px}
.bk-sum .kpi{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:11px 13px;min-width:0}
.bk-sum .kpi .n{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.bk-sum .kpi .n.ok{color:var(--ok)} .bk-sum .kpi .n.warn{color:var(--warn)} .bk-sum .kpi .n.bad{color:var(--err)}
.bk-sum .kpi .l{font-size:12px;color:var(--dim);margin-top:3px}
.bk-body{flex:1 1 auto;min-height:180px;overflow:auto;padding-right:4px}

/* 顶栏只读徽标 */
.ro-chip{font-size:11.5px;letter-spacing:1px;color:var(--warn);border:1px solid rgba(255,176,32,.45);
  background:rgba(255,176,32,.12);padding:3px 9px;border-radius:7px;flex:0 0 auto;white-space:nowrap;font-weight:700}
/* 令牌行：输入框 + 显示按钮 */
.tok-row{display:flex;gap:8px;align-items:center;min-width:0}
.tok-row input{flex:1 1 auto;min-width:0}
.tok-row .btn{flex:0 0 auto}

/* 面板防护清单：两列 chip 网格，10 项在 1080 屏也能一屏看完（表格版要高 425px，只能看 4 行） */
.gchecks{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:8px;padding:11px 13px}
.gchk{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:rgba(16,28,52,.5);min-width:0}
.gchk .badge{flex:0 0 auto;margin-top:1px}
.gchk .t{font-size:12.5px;color:var(--ink-2);line-height:1.55;min-width:0;overflow-wrap:anywhere}
.gchk.no{border-color:rgba(255,176,32,.28);background:rgba(255,176,32,.05)}
.gchk .fix{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.gchk .lv{flex:0 0 auto;font-size:11px;color:var(--dim);margin-left:auto;padding-left:6px}

/* 备份行：第三列不再吃满 1fr（否则文件数被推到最右、看着像和按钮重叠） */
.bk-row{grid-template-columns:158px 86px 160px 1fr}
.bk-row .sz{text-align:left}
/* 备份卡撑满页面剩余高度，列表内部滚动（1080 屏下方不留半屏空白） */
.page.tall .card.bk-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.page.tall .card.bk-card .bk-body{flex:1 1 auto;min-height:120px}

/* 更新提示条：面板代码更新后，长开着的页面会浮出一条提示（避免一直跑旧 JS 看不到新功能） */
.upd-bar{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:12px;border:1px solid rgba(255,176,32,.42);background:rgba(40,32,12,.96);
  color:#ffd98a;font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:calc(100% - 32px)}
.upd-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upd-bar .btn{flex:0 0 auto}

/* 操作审计：按主机 / 分类聚合卡片 + 目标主机列 */
.acard{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 11px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);cursor:pointer;color:var(--ink);min-width:96px;transition:.15s}
.acard b{font-size:12.5px;font-weight:600}
.acard span{color:var(--sub);font-size:11px;font-weight:400}
.acard:hover{border-color:var(--ok)}
.acard.on{background:rgba(54,224,160,.12);border-color:var(--ok);color:var(--ok)}
.acard.on span{color:var(--ok)}
.badge.cat{color:var(--cyan,#3fb8e0);border-color:rgba(63,184,224,.4);background:rgba(63,184,224,.08)}
.audit-grid td.cat-col,.audit-grid th{white-space:nowrap}

/* 用户管理 → SSH 访问授权面板 */
.ssh-panel{margin-top:14px;border:1px solid rgba(54,224,160,.4);border-radius:12px;padding:14px 16px;background:rgba(54,224,160,.04)}
.ssh-panel h4{margin:0 0 4px;display:flex;justify-content:space-between;align-items:center;font-size:14px}
.ssh-sec{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.ssh-sec .sub{font-weight:600;margin-bottom:8px;color:var(--ink)}
.ssh-sec .sub2{font-weight:600;margin:12px 0 4px;font-size:12px;color:var(--sub)}
.ssh-panel textarea{width:100%;min-height:62px;background:rgba(8,12,18,.7);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:8px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;resize:vertical;box-sizing:border-box}
.ssh-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px}
.ssh-row .sel{min-width:170px}
.ssh-row .ck{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:5px;cursor:pointer}
.ssh-tip{font-size:11.5px;margin:8px 0 0;color:var(--sub)}
.ssh-help{margin:0 0 10px;border:1px solid rgba(125,145,165,.18);border-radius:8px;background:rgba(12,17,24,.5)}
.ssh-help>summary{cursor:pointer;padding:8px 11px;font-size:12px;color:var(--cyan);list-style:none;user-select:none}
.ssh-help>summary::-webkit-details-marker{display:none}
.ssh-help>summary::before{content:"▸ ";color:var(--sub)}
.ssh-help[open]>summary::before{content:"▾ "}
.ssh-help-body{padding:0 11px 11px;display:flex;flex-direction:column;gap:7px}
.ssh-help-body p{margin:0;font-size:12px;line-height:1.6;color:var(--ink)}
.ssh-help-body p.dim{color:var(--sub);font-size:11.5px}
.ssh-help-body code{background:rgba(8,12,18,.75);padding:2px 5px;border-radius:4px;color:#8ff;font-size:11px;border:1px solid var(--line);word-break:break-all}
.ssh-cmd{display:flex;flex-direction:column;gap:3px;background:rgba(8,12,18,.55);border:1px solid var(--line);border-radius:7px;padding:7px 9px}
.ssh-cmd .os{font-size:11px;color:var(--sub)}
.ssh-cmd code{background:none;border:none;padding:0;color:#8ff;font-size:11.5px;word-break:break-all}
.pk-list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.pk-row{display:flex;align-items:center;gap:8px;font-size:12px}
.pk-row code{background:rgba(8,12,18,.7);padding:4px 7px;border-radius:6px;color:#8ff;font-size:11px;border:1px solid var(--line);word-break:break-all}
.ssh-status{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.g-list{display:flex;flex-direction:column;gap:6px}
.g-row{display:flex;align-items:center;gap:8px;font-size:12px}
.g-row code{background:rgba(8,12,18,.7);padding:4px 7px;border-radius:6px;color:#8ff;font-size:11.5px;border:1px solid var(--line)}
.lg{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--sub);background:rgba(8,12,18,.7);padding:4px 7px;border-radius:6px;border:1px solid var(--line);white-space:pre}

/* =========================================================================
 * 2026-11-04 界面重构：顶部导航收纳 + 安全中心左侧分组导航 + 成员卡片 + SSH 步骤
 * 参考开源骨架：shadcn-admin / Ant Design Pro（侧栏分组 + 顶部状态条 + 内容区）
 * ====================================================================== */

/* —— 顶部导航：更多收纳 —— */
.nav-sep{width:1px;height:20px;background:var(--line);margin:0 5px;align-self:center;flex:0 0 auto}
.nav-more-btn .caret{display:inline-block;font-size:10px;margin-left:5px;opacity:.75;transition:transform .18s}
.nav-more-btn.open .caret{transform:rotate(180deg)}
.nav-more{position:fixed;z-index:80;min-width:152px;padding:6px;display:flex;flex-direction:column;gap:2px;
  background:rgba(10,21,48,.985);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);backdrop-filter:blur(12px)}
.nav-more[hidden]{display:none}
.nav-more button{justify-content:flex-start;text-align:left;width:100%;border:none;background:none;border-radius:7px;
  padding:8px 12px;font-size:13px;letter-spacing:.5px;color:var(--sub)}
.nav-more button:hover{background:rgba(55,214,255,.12);border-color:transparent;color:var(--ink)}
.nav-more button.on{background:rgba(55,214,255,.16);color:var(--cyan)}

/* —— 安全中心：顶部状态条 —— */
.sec-page{gap:clamp(10px,1vw,14px)}
.sec-top{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.sec-tt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-tt h1{font-size:clamp(17px,1.8vw,22px);font-weight:700;letter-spacing:2px;color:#eaf6ff;margin:0}
.sec-tt .sub{font-size:12.5px;color:var(--dim);letter-spacing:.4px}
.ss-strip{display:flex;align-items:center;flex-wrap:wrap;gap:0;padding:10px 4px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.ss-k{padding:1px 15px;min-width:78px}
.ss-k .v{font-size:21px;font-weight:700;line-height:1.05;color:var(--cyan);letter-spacing:.5px}
.ss-k .v.r{color:var(--err)} .ss-k .v.y{color:var(--warn)}
.ss-k .l{font-size:10.5px;color:var(--dim);margin-top:3px;letter-spacing:.7px}
.ss-div{width:1px;align-self:stretch;min-height:30px;background:var(--line);margin:0 6px}
.ss-chips{display:flex;flex-wrap:wrap;gap:5px 16px;align-items:center;padding:0 12px;flex:1 1 320px}
.ss-c{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sub);white-space:nowrap}
.ss-c i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(46,230,166,.7);flex:0 0 auto}
.ss-c.warn i{background:var(--warn);box-shadow:0 0 8px rgba(255,176,32,.7)}
.ss-c.bad i{background:var(--err);box-shadow:0 0 8px rgba(255,84,112,.7)}

/* —— 安全中心：左右分栏骨架 —— */
.sec-shell{display:grid;grid-template-columns:182px minmax(0,1fr);gap:clamp(12px,1.2vw,18px);align-items:start;min-height:0}
.sec-side{position:sticky;top:0;display:flex;flex-direction:column;gap:13px;padding:12px 10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.sn-grp{display:flex;flex-direction:column;gap:2px}
.sn-lb{font-size:10px;letter-spacing:1.8px;color:var(--dim);padding:0 8px 5px;text-transform:uppercase}
.sn-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-family:inherit;font-size:13px;color:var(--sub);
  background:none;border:none;border-radius:7px;padding:8px 10px;cursor:pointer;letter-spacing:.4px;transition:.15s}
.sn-t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-b{flex:0 0 auto;min-width:18px;height:17px;padding:0 5px;border-radius:9px;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
.sn-b.warn{background:rgba(255,176,32,.16);color:#ffe2ad;border:1px solid rgba(255,176,32,.32)}
.sn-b.bad{background:rgba(255,84,112,.16);color:#ffc2cd;border:1px solid rgba(255,84,112,.34)}
.sn-b.info{background:rgba(63,184,224,.15);color:#a9e2f5;border:1px solid rgba(63,184,224,.3)}
.sn-item:hover{background:rgba(55,214,255,.08);color:var(--ink)}
.sn-item.on{background:rgba(55,214,255,.14);color:var(--cyan);box-shadow:inset 2px 0 0 var(--cyan);font-weight:600}
.sec-main{min-width:0;display:flex;flex-direction:column;gap:clamp(9px,1vw,14px)}

/* —— 成员卡片 —— */
.mbr-wrap{display:flex;flex-direction:column;gap:12px;min-width:0}
.mbr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mbr-stats{display:flex;align-items:center;gap:13px;font-size:12px;color:var(--sub);flex-wrap:wrap}
.mbr-stats i{width:1px;height:12px;background:var(--line);display:inline-block}
.mbr-stats b{color:var(--ink);font-size:14.5px;margin-right:3px}
.mbr-list{display:flex;flex-direction:column;gap:8px}
.mbr{display:grid;grid-template-columns:38px minmax(140px,1.5fr) 88px 76px minmax(172px,1.25fr) 92px auto;
  gap:12px;align-items:center;padding:11px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;transition:.15s}
.mbr:hover{border-color:var(--line2);background:var(--panel-2)}
.mbr.me{border-color:rgba(55,214,255,.34)}
.mbr .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;
  color:#06121f;background:linear-gradient(145deg,var(--cyan),#1fa9d6)}
.mbr .mid{min-width:0}
.mbr .nm{font-size:13.5px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:7px}
.mbr .tagme{font-size:10px;padding:1px 6px;border-radius:6px;background:rgba(55,214,255,.16);color:var(--cyan);font-weight:600}
.mbr .meta{font-size:11.5px;color:var(--dim);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbr .col{font-size:12px;color:var(--sub);min-width:0}
.mbr .col .k{font-size:10px;color:var(--dim);letter-spacing:.6px}
.mbr .col .v{font-size:11.5px;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbr .st{display:flex;align-items:center;gap:6px;font-size:12px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px rgba(46,230,166,.8);display:inline-block;flex:0 0 auto}
.dot.off{background:var(--grey);box-shadow:none}
.mbr .act{display:flex;align-items:center;gap:6px;justify-self:end}
details.more{position:relative}
details.more>summary{list-style:none;cursor:pointer;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--sub);font-size:15px;background:rgba(8,12,18,.4);line-height:1}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary{color:var(--cyan);border-color:var(--line2)}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:130px;padding:5px;display:flex;flex-direction:column;gap:2px;
  background:rgba(10,21,48,.99);border:1px solid var(--line2);border-radius:9px;box-shadow:0 16px 34px rgba(0,0,0,.6)}
.more-menu button{font-family:inherit;text-align:left;background:none;border:none;color:var(--sub);font-size:12.5px;padding:7px 10px;border-radius:6px;cursor:pointer}
.more-menu button:hover{background:rgba(55,214,255,.1);color:var(--ink)}
.more-menu button.danger{color:#ff8095}
.more-menu button.danger:hover{background:rgba(255,84,112,.14);color:var(--err)}
.more-menu button:disabled{opacity:.4;cursor:not-allowed}
.note-fold{border:1px solid var(--line);border-radius:8px;background:rgba(12,17,24,.35)}
.note-fold>summary{cursor:pointer;padding:8px 12px;color:var(--sub);font-size:12px;list-style:none}
.note-fold>summary::-webkit-details-marker{display:none}
.note-fold>summary::before{content:"? ";color:var(--cyan);font-weight:700}
.note-fold .nf-body{padding:0 12px 10px;color:var(--dim);line-height:1.8;font-size:11.5px}

/* —— SSH 访问面板：三步式 —— */
.ssh-panel{border:1px solid rgba(55,214,255,.22);border-radius:12px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(55,214,255,.05),rgba(13,27,56,.5))}
.ssh-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ssh-hd .t{font-size:14px;font-weight:700;color:var(--ink)}
.ssh-hd .m{font-size:11.5px;color:var(--dim);margin-top:3px}
.steps{display:flex;flex-direction:column;margin-top:2px}
.stp{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;padding:12px 0;position:relative}
.stp:not(:last-child)::before{content:"";position:absolute;left:12.5px;top:36px;bottom:-4px;width:1px;background:var(--line)}
.stp-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  color:var(--cyan);border:1px solid rgba(55,214,255,.4);background:rgba(55,214,255,.08);z-index:1;margin-top:1px}
.stp-t{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:.4px}
.stp-b{min-width:0}
.pk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pkchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sub);
  background:rgba(8,12,18,.55);border:1px solid var(--line);border-radius:20px;padding:4px 6px 4px 10px}
.pkchip code{color:#8ff;font-size:10.5px;background:none;border:none;padding:0}
.pkchip button{width:16px;height:16px;border-radius:50%;border:none;background:rgba(255,84,112,.16);color:#ff8095;
  cursor:pointer;line-height:1;font-size:12px;padding:0}
.pkchip button:hover{background:rgba(255,84,112,.32);color:var(--err)}
.pk-empty{font-size:11.5px;color:var(--dim);margin-bottom:8px}
.in-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.in-row input{flex:1 1 300px;min-width:0;background:rgba(8,12,18,.7);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:7px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;box-sizing:border-box}
.in-row input:focus{outline:none;border-color:var(--line2)}
.in-row select{min-width:170px}
.in-row .ck{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:5px;cursor:pointer}
.hint{font-size:11px;color:var(--dim);margin-top:7px;line-height:1.65}
.mini-help{margin-top:9px;border:1px solid var(--line);border-radius:7px;background:rgba(8,12,18,.35)}
.mini-help>summary{cursor:pointer;padding:7px 10px;font-size:11.5px;color:var(--cyan);list-style:none}
.mini-help>summary::-webkit-details-marker{display:none}
.mini-help>summary::before{content:"▸ ";color:var(--sub)}
.mini-help[open]>summary::before{content:"▾ "}
.mh-body{padding:0 10px 10px;display:flex;flex-direction:column;gap:6px}
.mh-body .cmd{display:flex;flex-direction:column;gap:2px;background:rgba(8,12,18,.5);border:1px solid var(--line);border-radius:6px;padding:6px 9px}
.mh-body .cmd span{font-size:10.5px;color:var(--dim)}
.mh-body .cmd code{color:#8ff;font-size:11px;word-break:break-all;background:none;border:none;padding:0}
.mh-body p{margin:2px 0 0;font-size:11px;color:var(--dim);line-height:1.7}
.mh-body p code{background:rgba(8,12,18,.7);border:1px solid var(--line);border-radius:4px;padding:1px 4px;color:#8ff}

/* —— 响应式 —— */
@media (max-width:1000px){
  .mbr{grid-template-columns:34px minmax(0,1fr) auto;row-gap:8px}
  .mbr .col.lg,.mbr .col.ky{display:none}
  .mbr .act{grid-column:2 / -1;justify-self:start}
}
@media (max-width:900px){
  .sec-shell{grid-template-columns:1fr}
  .sec-side{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding:8px;scrollbar-width:none}
  .sec-side::-webkit-scrollbar{display:none}
  .sn-grp{flex-direction:row;gap:4px;align-items:center;flex:0 0 auto}
  .sn-lb{display:none}
  .sn-item{white-space:nowrap;width:auto}
  .ss-k{min-width:64px;padding:1px 11px}
}

/* —— 细节修正：窄屏导航不挤压、SSH 输入行不拉满 —— */
@media (max-width:1280px){
  .nav{gap:6px;margin-left:12px}
  .nav button{padding:6px 11px;font-size:13px;letter-spacing:.5px}
  .nav-sep{margin:0 3px}
  .brand .title{font-size:17px;letter-spacing:1.5px}
  .brand .sub{display:none}
}
@media (max-width:1100px){
  .search-wrap{max-width:170px}
  .clock{display:none}
}
@supports (height:1px){
  .ssh-panel .in-row input{max-width:760px}
}
.stp-b .in-row #sshHost{flex:1 1 240px}
.ev-ip,.mbr .dim{color:var(--dim);font-size:11px}

/* 「更多」按钮独立于 .nav（不参与横向滚动），复用同一套 pill 外观 */
.nav-more-btn{flex:0 0 auto;font-family:inherit;font-size:14.5px;letter-spacing:1px;color:var(--sub);
  background:transparent;border:1px solid var(--line);padding:7px 16px;border-radius:8px;cursor:pointer;transition:.2s;
  display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav-more-btn:hover{color:var(--ink);border-color:var(--line2);background:rgba(30,60,120,.25)}
.nav-more-btn.on,.nav-more-btn.open{color:var(--cyan);border-color:rgba(55,214,255,.45);background:rgba(55,214,255,.12)}
@media (max-width:1280px){
  .nav-more-btn{padding:6px 11px;font-size:13px;letter-spacing:.5px}
}
@media (max-width:920px){
  .header{gap:8px}
  .nav{margin-left:8px;gap:5px}
  .nav button{padding:6px 9px;font-size:12.5px}
  .nav-more-btn{padding:6px 9px;font-size:12.5px}
  .search-wrap{max-width:140px}
}

/* 窄屏：主入口只留 3 个最常用的，其余全部收进「更多」（避免 nav 横向滚动藏掉页签） */
.nav-more .only-narrow{display:none}
@media (max-width:1150px){
  .nav-more .only-narrow{display:block}
  .nav button[data-r="deploy"],.nav button[data-r="trend"]{display:none}
}

/* ===== SSH 登录监控卡片（替代原来一行行裸 last 文本） ===== */
.mon-empty{padding:14px 4px;color:var(--dim);font-size:12.5px}
.mon-empty.err{color:var(--err)}
.mon-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 4px}
.mon-sum .ms{display:flex;flex-direction:column;gap:3px;min-width:62px;padding:8px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r)}
.mon-sum .ms b{font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.mon-sum .ms b.ok{color:var(--ok)}
.mon-sum .ms b.err{color:var(--err)}
.mon-sum .ms span{font-size:11px;color:var(--dim)}
.mon-sum .btn{margin-left:auto}
.mon-list{display:grid;gap:10px;margin-top:6px}
.mon-card{padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.mon-card.live{border-color:rgba(54,224,160,.34)}
.mc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.mc-top b{color:var(--ink);font-size:13.5px;font-weight:600}
.mc-sp{flex:1 1 auto;min-width:0}
.mc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px}
.mc-grid>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.mc-grid>div>span{font-size:11px;color:var(--dim)}
.mc-grid>div>b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-grid>div>b.ok{color:var(--ok)}
.mc-grid>div>b.dim{color:var(--dim)}
.mc-grid i{font-style:normal}
.mc-grid i.ok{color:var(--ok)}
.mc-grid i.err{color:var(--err)}
.mc-grid small{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-note{margin-top:10px;font-size:11.5px;color:var(--warn);background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.2);border-radius:8px;padding:6px 9px;line-height:1.5}
.mon-raw{margin-top:2px}
.mon-raw summary{cursor:pointer;font-size:12px;color:var(--sub);padding:4px 0;user-select:none}
.mon-line{display:flex;align-items:center;gap:10px;padding:5px 2px;border-bottom:1px solid var(--line);font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.mon-line .t{color:var(--dim);flex:0 0 auto}
.mon-line .u{color:var(--ink);flex:0 0 auto}
.mon-line .i{color:var(--cyan);flex:0 0 auto}
.mon-line .f{color:var(--dim);margin-left:auto;flex:0 0 auto}

/* ===== 稳定性：数字等宽，避免每次刷新位数变化把左右元素挤动 ===== */
#app .kpi .v,#app .sitem b,#app .srv-stats b,#app .mt .v,#app .nv,
table.grid td,table.grid th,#app .tinfo-line b,#app .ms,#app .mon-line{
  font-variant-numeric:tabular-nums}

/* 折线/面积只过渡数据变化，不做入场动画：刷新时不再"闪一下" */
#lineCpu,#lineMem,#lineDisk,#areaCpu,#areaMem{transition:none}

/* ===== 顶部探测告警横幅：收成一行 + 可展开，避免它出现/消失时整页高度大跳 ===== */
.probe-warn{align-items:center;padding:9px 14px;min-height:42px}
.probe-warn .pw-body{gap:0}
.probe-warn .pw-more{font-size:12.5px;color:var(--sub)}
.probe-warn .pw-more>summary{cursor:pointer;color:var(--dim);font-size:12px;padding:2px 0;user-select:none;
  list-style:none;display:flex;align-items:center;gap:5px}
.probe-warn .pw-more>summary::-webkit-details-marker{display:none}
.probe-warn .pw-more>summary::before{content:'▸';font-size:10px;transition:transform .15s}
.probe-warn .pw-more[open]>summary::before{transform:rotate(90deg)}
.probe-warn .pw-more[open]{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.probe-warn .pw-more span{display:block;line-height:1.55}

/* ===== 成员卡片：登录记录两行（面板 / SSH） ===== */
.mbr .col.lg{display:flex;flex-direction:column;gap:2px;min-width:0}
.mbr .lgln{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sub);line-height:1.5;min-width:0}
.mbr .lgln .lb{flex:0 0 auto;width:22px;font-size:10px;color:var(--dim);letter-spacing:.4px}
.mbr .lgln .val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-variant-numeric:tabular-nums}

/* ===== 角色权限矩阵（补满成员页下方空白） ===== */
.rm-card{padding:0;overflow:hidden}
.rm-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--line)}
.rm-hd b{font-size:13.5px;color:var(--ink);letter-spacing:.3px}
.rm-hd .dim{font-size:11.5px;color:var(--dim)}
table.rm{width:100%}
table.rm th,table.rm td{text-align:center;font-size:12.5px}
table.rm th:first-child,table.rm td:first-child{text-align:left}
table.rm td:first-child{color:var(--ink-2)}
table.rm th{color:var(--dim);font-weight:600}
.rm-y{color:var(--ok);font-weight:700;font-size:13px}
.rm-note{padding:10px 14px;font-size:11.5px;color:var(--dim);line-height:1.6;border-top:1px solid var(--line)}

/* ==========================================================================
   Web 风控（企业级视图）
   结构对齐雷池 SafeLine / Cloudflare Security Analytics / CrowdSec：
   时间窗 → 核心指标 → 攻击趋势 → 类型分布 · 高危路径 · 扫描器指纹 → 来源明细（可下钻·可处置）
   ========================================================================== */
.wf{display:flex;flex-direction:column;gap:12px;min-width:0}
.wf-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.wf-fill{flex:1;min-width:0}
.wf-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:rgba(10,22,46,.6)}
.wf-seg-b{appearance:none;border:0;background:transparent;color:var(--sub);font:inherit;font-size:12.5px;padding:6px 13px;cursor:pointer;white-space:nowrap;border-right:1px solid var(--line);transition:background .15s,color .15s}
.wf-seg-b:last-child{border-right:0}
.wf-seg-b:hover{color:var(--ink);background:rgba(55,214,255,.07)}
.wf-seg-b.on{background:rgba(55,214,255,.16);color:#bfe9ff;box-shadow:inset 0 0 0 1px rgba(55,214,255,.28)}
.wf-sel{background:rgba(10,22,46,.75);border:1px solid var(--line);border-radius:9px;color:var(--ink-2);font:inherit;font-size:12.5px;padding:6px 9px;outline:none;max-width:200px}
.wf-sel:focus{border-color:var(--line2)}
.wf-cov{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wf-cw{color:#ffd9a0;background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.28);border-radius:20px;padding:1px 9px;font-size:11px}

/* —— 核心指标 —— */
.wf-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.wf-k{border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,rgba(16,34,68,.72),rgba(9,19,42,.72));padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.wf-kl{font-size:12px;color:var(--dim)}
.wf-kv{font-size:27px;font-weight:700;line-height:1.12;color:var(--ink);font-variant-numeric:tabular-nums}
.wf-kv.bad{color:var(--err)}
.wf-ks{font-size:11.5px;color:var(--sub);line-height:1.45}
.wf-kf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px;min-height:28px}
.wf-d{font-size:11px;padding:1px 8px;border-radius:20px;white-space:nowrap}
.wf-d.up{color:#ffc2cd;background:rgba(255,84,112,.12);border:1px solid rgba(255,84,112,.28)}
.wf-d.down,.wf-d.ok{color:#a9f0d3;background:rgba(46,230,166,.1);border:1px solid rgba(46,230,166,.26)}
.wf-d.dim{color:var(--dim);background:rgba(90,107,133,.14);border:1px solid rgba(90,107,133,.26)}
.wf-spark{width:100px;max-width:46%;height:28px;flex:0 0 auto;opacity:.9}

/* —— 卡片 / 图表 —— */
.wf-card{border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,rgba(16,34,68,.62),rgba(9,19,42,.62));padding:13px 14px;min-width:0}
.wf-chd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.wf-chd h4{font-size:13.5px;font-weight:600;color:#cfe6ff;letter-spacing:.3px}
.wf-chd em{font-style:normal;font-size:11px}
.wf-lg{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--sub);flex-wrap:wrap}
.wf-lg span{display:inline-flex;align-items:center;gap:5px}
.wf-lg i{width:9px;height:9px;border-radius:2px;display:inline-block}
.wf-lg i.hi{background:#ff5470}.wf-lg i.mid{background:#ffb020}.wf-lg i.lo{background:#5b8def}
.wf-trend{width:100%;height:190px;display:block}
.wf-ax{fill:var(--dim);font-size:10px;font-family:inherit}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;align-items:start}

/* —— 类型分布 —— */
.wf-cat{margin-bottom:9px}
.wf-cat:last-child{margin-bottom:0}
.wf-cat-h{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);margin-bottom:4px}
.wf-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.wf-dot.hi{background:#ff5470}.wf-dot.mid{background:#ffb020}.wf-dot.lo{background:#5b8def}
.wf-cat-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-cat-h b{font-variant-numeric:tabular-nums;font-weight:700}
.wf-cat-h i{font-style:normal;color:var(--dim);font-size:11px;width:40px;text-align:right;font-variant-numeric:tabular-nums}
.wf-cat-b{height:5px;border-radius:4px;background:rgba(90,160,255,.1);overflow:hidden}
.wf-cat-b span{display:block;height:100%;border-radius:4px;min-width:0}
.wf-cat-b span.hi{background:linear-gradient(90deg,rgba(255,84,112,.5),#ff5470)}
.wf-cat-b span.mid{background:linear-gradient(90deg,rgba(255,176,32,.45),#ffb020)}
.wf-cat-b span.lo{background:linear-gradient(90deg,rgba(91,141,239,.45),#5b8def)}

/* —— 路径 / UA —— */
.wf-p{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed rgba(90,160,255,.1);font-size:12px;min-width:0}
.wf-p:last-child{border-bottom:0}
.wf-p .atk-tag{flex:0 0 auto;margin:0;font-size:10px;padding:1px 6px}
.wf-p code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.wf-p b{font-variant-numeric:tabular-nums;color:var(--ink);font-size:12.5px}
.wf-u{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:11.5px;min-width:0}
.wf-u b{flex:0 0 32px;text-align:right;color:#bfe9ff;font-variant-numeric:tabular-nums}
.wf-u span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}

/* —— 来源明细表 —— */
.wf-tblwrap{overflow-x:auto}
.wf-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.wf-tbl th{text-align:left;font-size:11.5px;font-weight:600;color:var(--dim);padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.wf-tbl td{padding:8px 9px;border-bottom:1px solid rgba(90,160,255,.08);vertical-align:middle}
.wf-tbl tbody tr:hover{background:rgba(55,214,255,.04)}
.wf-tbl th.ops,.wf-tbl td.ops{text-align:right;white-space:nowrap}
.wf-tbl td.ops .btn+.btn{margin-left:6px}
.wf-row.open{background:rgba(55,214,255,.06)}
.wf-lock{font-size:10px;color:#a9f0d3;background:rgba(46,230,166,.12);border:1px solid rgba(46,230,166,.3);border-radius:20px;padding:0 6px;margin-left:6px;white-space:nowrap}
.wf-n{display:flex;align-items:center;gap:8px;min-width:76px}
.wf-n b{font-variant-numeric:tabular-nums}
.wf-nb{flex:1;height:4px;border-radius:3px;background:rgba(90,160,255,.12);overflow:hidden;min-width:28px}
.wf-nb i{display:block;height:100%;background:linear-gradient(90deg,rgba(55,214,255,.4),#37d6ff);border-radius:3px}
.wf-det td{background:rgba(8,18,40,.55);padding:0 9px 12px}
.wf-dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px 18px;padding-top:10px}
.wf-dk{display:flex;gap:8px;font-size:11.5px;min-width:0;align-items:baseline}
.wf-dk span{flex:0 0 76px;color:var(--dim)}
.wf-dk b{flex:1;min-width:0;color:var(--ink-2);font-weight:500;word-break:break-all}
.wf-note{font-size:11.5px;color:var(--dim);line-height:1.7;padding:2px 2px 0}
@media(max-width:900px){
  .wf-kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .wf-kv{font-size:23px}
  .wf-trend{height:160px}
}
/* 明细表细节修正 */
.wf-hr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wf-hr em{font-style:normal;font-size:11px}
.wf-n{max-width:104px}
.wf-same{font-size:10px;color:var(--grey);letter-spacing:.5px}

/* ======================================================================
 * 安全防护中心 · 雷池风格浅色主题（仅作用于 .sec-light 内部，不影响其余深色页）
 * ====================================================================== */
.sec-light{
  --rl-bg:transparent; --rl-panel:var(--panel); --rl-panel2:var(--panel-2);
  --rl-border:var(--line); --rl-border2:rgba(90,160,255,.08);
  --rl-text:var(--ink); --rl-text2:var(--sub); --rl-text3:var(--dim);
  --rl-primary:var(--cyan); --rl-primary2:var(--cyan); --rl-primary-soft:rgba(55,214,255,.12);
  --rl-red:var(--err); --rl-red-soft:rgba(255,84,112,.15); --rl-orange:var(--warn); --rl-orange-soft:rgba(255,176,32,.15);
  --rl-green:var(--ok); --rl-green-soft:rgba(46,230,166,.15); --rl-blue:var(--blue); --rl-blue-soft:rgba(91,141,239,.16);
  --rl-shadow:0 1px 2px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.24);
  --rl-radius:12px;
  color:var(--rl-text); background:var(--rl-bg);
}
.sec-light .sec-top{background:transparent;border-bottom:0;}
.sec-light .sec-tt h1{color:var(--rl-text);}
.sec-light .sec-tt .sub{color:var(--rl-text3);}
.sec-light .sec-shell{background:var(--rl-bg);gap:14px;padding:14px;}
.sec-light .sec-side{background:var(--rl-panel);border:1px solid var(--rl-border);border-radius:var(--rl-radius);box-shadow:var(--rl-shadow);padding:10px;}
.sec-light .sn-lb{color:var(--rl-text3);font-size:11px;font-weight:600;letter-spacing:.6px;padding:6px 10px 4px;}
.sec-light .sn-item{color:var(--rl-text2);border-radius:8px;margin:2px 0;padding:9px 11px;justify-content:space-between;display:flex;align-items:center;transition:.15s;}
.sec-light .sn-item:hover{background:var(--rl-panel2);color:var(--rl-text);}
.sec-light .sn-item.on{background:var(--rl-primary-soft);color:var(--rl-primary);font-weight:600;box-shadow:inset 3px 0 0 var(--rl-primary);}
.sec-light .sn-b{background:var(--rl-red-soft);color:var(--rl-red);}
.sec-light .sn-b.info{background:var(--rl-blue-soft);color:var(--rl-blue);}
.sec-light .sn-b.warn{background:var(--rl-orange-soft);color:var(--rl-orange);}
.sec-light .sec-main{background:var(--rl-bg);}
/* 顶部状态条浅色化 */
.sec-light .ss-strip{background:var(--rl-panel);border:1px solid var(--rl-border);border-radius:var(--rl-radius);box-shadow:var(--rl-shadow);}
.sec-light .ss-k .v{color:var(--rl-text);} .sec-light .ss-k .l{color:var(--rl-text3);}
.sec-light .ss-c{background:var(--rl-panel2);color:var(--rl-text2);border:1px solid var(--rl-border);}
.sec-light .ss-c i{background:var(--rl-text3);}
.sec-light .ss-c.bad i{background:var(--rl-red);} .sec-light .ss-c.warn i{background:var(--rl-orange);}
.sec-light .ss-c.ok i,.sec-light .ss-c.gr i{background:var(--rl-green);}
.sec-light .ss-div{border-left:1px solid var(--rl-border);}
/* 通用卡片/表单浅色化（其余子页复用） */
.sec-light .card{background:var(--rl-panel);border:1px solid var(--rl-border);border-radius:var(--rl-radius);box-shadow:var(--rl-shadow);color:var(--rl-text);}
.sec-light .guard-card{background:var(--rl-panel2);border:1px solid var(--rl-border);border-radius:10px;}
.sec-light .guard-kv span{color:var(--rl-text3);} .sec-light .guard-kv b{color:var(--rl-text);}
.sec-light .empty{color:var(--rl-text3);}
.sec-light .badge{background:var(--rl-panel2);color:var(--rl-text2);border:1px solid var(--rl-border);}
.sec-light .badge.ok{background:var(--rl-green-soft);color:var(--rl-green);}
.sec-light .badge.y{background:var(--rl-orange-soft);color:var(--rl-orange);}
.sec-light .badge.gr{background:var(--rl-blue-soft);color:var(--rl-blue);}
.sec-light .h4,.sec-light h4{color:var(--rl-text);}
.sec-light select,.sec-light input[type=text],.sec-light input[type=password]{background:var(--rl-panel);border:1px solid var(--rl-border);color:var(--rl-text);border-radius:8px;}
.sec-light table{background:var(--rl-panel);color:var(--rl-text);}
.sec-light th{background:var(--rl-panel2);color:var(--rl-text2);border-bottom:1px solid var(--rl-border);}
.sec-light td{border-bottom:1px solid var(--rl-border2);}
.sec-light tr:hover td{background:var(--rl-panel2);}
.sec-light .btn{background:var(--rl-panel);border:1px solid var(--rl-border);color:var(--rl-text2);}
.sec-light .btn:hover{border-color:var(--rl-primary);color:var(--rl-primary);}
.sec-light .btn.primary{background:var(--rl-primary);border-color:var(--rl-primary);color:#04121a;}
.sec-light .btn.danger{border-color:rgba(255,84,112,.35);color:var(--rl-red);}
.sec-light .btn.danger:hover{background:var(--rl-red);color:#fff;border-color:var(--rl-red);}
.sec-light .sw .track{background:var(--rl-border);}
.sec-light .sw input:checked+.track{background:var(--rl-primary);}
.sec-light .mono{color:var(--rl-text2);}
.sec-light .dim{color:var(--rl-text3);}
.sec-light .ok{color:var(--rl-green);} .sec-light .warn{color:var(--rl-orange);} .sec-light .bad{color:var(--rl-red);}

/* ===== 态势总览 · 按问题聚合（只作用于 posture 子页） ===== */
.pst-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;background:var(--rl-panel);border:1px solid var(--rl-border);border-left:2px solid var(--rl-primary);border-radius:var(--rl-radius);padding:13px 16px}
.pst-vmain{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 320px}
.pst-vmain b{font-size:14px;font-weight:500;color:var(--rl-text)}
.pst-vmain span{font-size:12.5px;color:var(--rl-text2)}
.pst-vact{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--rl-text2);min-width:0}
.pst-vlb{flex:0 0 auto;font-size:11.5px;padding:2px 8px;border-radius:6px;background:var(--rl-red-soft);color:var(--rl-red)}

.pst-hosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.pst-host{background:var(--rl-panel);border:1px solid var(--rl-border);border-radius:var(--rl-radius);padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:8px}
.pst-hid{display:flex;align-items:baseline;gap:8px;min-width:0}
.pst-hid b{font-size:13.5px;font-weight:500;color:var(--rl-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pst-hid .mono{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pst-hbar{height:5px;border-radius:4px;background:var(--rl-panel2);overflow:hidden}
.pst-hbar>i{display:block;height:100%;border-radius:4px;background:var(--rl-green)}
.pst-hbar>i.y{background:var(--rl-orange)} .pst-hbar>i.r{background:var(--rl-red)}
.pst-hnum{display:flex;gap:14px;font-size:12.5px}
.pst-hft{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;min-width:0}
.pst-hft .dim{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.pst-rows{display:flex;flex-direction:column}
.pst-row{display:grid;grid-template-columns:38px minmax(0,1fr) 150px;gap:12px;align-items:start;padding:11px 14px;border-bottom:1px solid var(--rl-border);min-width:0}
.pst-row:last-child{border-bottom:0}
.pst-lv{display:inline-block;font-size:11.5px;font-family:ui-monospace,Menlo,Consolas,monospace;padding:2px 6px;border-radius:6px;background:var(--rl-panel2);color:var(--rl-text3);border:1px solid var(--rl-border);text-align:center}
.pst-lv.r{background:var(--rl-red-soft);color:var(--rl-red);border-color:rgba(255,84,112,.35)}
.pst-lv.y{background:var(--rl-orange-soft);color:var(--rl-orange);border-color:rgba(255,176,32,.3)}
.pst-gmain{min-width:0;display:flex;flex-direction:column;gap:5px}
.pst-gname{font-size:13.5px;color:var(--rl-text);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pst-gn{font-size:11.5px;color:var(--rl-text3)}
.pst-gdt{font-size:12px;color:var(--rl-text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pst-chips{display:flex;flex-wrap:wrap;gap:6px}
.pst-chip{font-size:11.5px;padding:2px 8px;border-radius:6px;background:var(--rl-panel2);border:1px solid var(--rl-border);color:var(--rl-text2);text-decoration:none;white-space:nowrap}
.pst-chip:hover{color:var(--rl-primary);border-color:var(--rl-primary)}
.pst-gadv{min-width:0;overflow:hidden;text-align:right}
.pst-gadv code.adv{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pst-platform{margin:12px 14px 14px;border:1px solid var(--rl-border);border-radius:var(--rl-radius);background:var(--rl-panel2);padding:10px 12px}
.pst-plhd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pst-plhd b{font-size:13px;font-weight:500;color:var(--rl-text)}
.pst-plhd .dim{font-size:11.5px}
.pst-plrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--rl-text2);padding:5px 0}
.pst-plnm{color:var(--rl-text)}
.pst-plrow .dim{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.pst-plrow .btn{margin-left:auto}
/* 补齐 .sec-light 漏改：旧 .sec-srv 亮蓝渐变统一到中性面板 */
.sec-light .sec-srv{background:var(--rl-panel);box-shadow:none}
/* 顶部状态条：原来 10.5px 小字挤成一片，只放松字号与留白，不改结构 */
.sec-light .ss-strip{padding:12px 8px}
.sec-light .ss-k .l{font-size:11.5px;margin-top:5px}
.sec-light .ss-c{font-size:12px}
@media(max-width:720px){
  .pst-row{grid-template-columns:34px minmax(0,1fr)}
  .pst-gadv{grid-column:2;text-align:left}
}

/* ---------------- 雷池组件 .rl-* ---------------- */
.rl-wrap{display:flex;flex-direction:column;gap:14px;}
.rl-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--rl-panel);border:1px solid var(--rl-border);border-radius:var(--rl-radius);box-shadow:var(--rl-shadow);padding:10px 12px;}
.rl-seg{display:inline-flex;background:var(--rl-panel2);border:1px solid var(--rl-border);border-radius:9px;padding:3px;gap:2px;}
.rl-seg button{border:0;background:transparent;color:var(--rl-text2);padding:6px 12px;border-radius:7px;cursor:pointer;font-size:13px;transition:.15s;white-space:nowrap;}
.rl-seg button:hover{color:var(--rl-text);}
.rl-seg button.on{background:var(--rl-primary);color:#04121a;box-shadow:0 2px 6px rgba(55,214,255,.28);}
.rl-seg button.on:hover{color:#04121a;}
.rl-sel{border:1px solid var(--rl-border);background:var(--rl-panel);color:var(--rl-text);border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer;}
.rl-fill{flex:1 1 auto;}
.rl-cov{font-size:12.5px;color:var(--rl-text2);background:var(--rl-primary-soft);border:1px solid rgba(55,214,255,.25);border-radius:9px;padding:8px 12px;}
.rl-cov b{color:var(--rl-primary);} .rl-cov .warn{color:var(--rl-orange);font-weight:600;}
/* KPI 矩阵 */
.rl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;}
.rl-kpi{background:var(--rl-panel);border:1px solid var(--rl-border);border-radius:var(--rl-radius);box-shadow:var(--rl-shadow);padding:14px 16px;position:relative;overflow:hidden;}
.rl-kpi .rl-kl{font-size:12.5px;color:var(--rl-text3);display:flex;align-items:center;gap:6px;}
.rl-kpi .rl-kv{font-size:27px;font-weight:700;color:var(--rl-text);line-height:1.2;margin:6px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.rl-kpi .rl-kv.red{color:var(--rl-red);} .rl-kpi .rl-kv.orange{color:var(--rl-orange);} .rl-kpi .rl-kv.green{color:var(--rl-green);} .rl-kpi .rl-kv.blue{color:var(--rl-blue);}
.rl-kpi .rl-ks{font-size:11.5px;color:var(--rl-text3);}
.rl-kpi .rl-kf{margin-top:6px;font-size:11.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rl-kpi .rl-d{font-weight:600;} .rl-kpi .rl-d.up{color:var(--rl-red);} .rl-kpi .rl-d.down{color:var(--rl-green);} .rl-kpi .rl-d.dim{color:var(--rl-text3);font-weight:400;}
.rl-spark{height:26px;width:88px;}
/* 统计小卡（4xx/5xx/拦截率…） */
.rl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.rl-stat{background:var(--rl-panel);border:1px solid var(--rl-border);border-radius:var(--rl-radius);box-shadow:var(--rl-shadow);padding:13px 15px;}
.rl-stat .rl-sl{font-size:12px;color:var(--rl-text3);}
.rl-stat .rl-sv{font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;margin:4px 0;}
.rl-stat .rl-ss{font-size:11px;color:var(--rl-text3);}
.rl-stat .bar{height:5px;background:var(--rl-panel2);border-radius:4px;margin-top:8px;overflow:hidden;}
.rl-stat .bar i{display:block;height:100%;border-radius:4px;}
/* 面板卡片 */
.rl-panel{background:var(--rl-panel);border:1px solid var(--rl-border);border-radius:var(--rl-radius);box-shadow:var(--rl-shadow);overflow:hidden;}
.rl-panel .rl-ph{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--rl-border2);}
.rl-panel .rl-ph h4{margin:0;font-size:14.5px;font-weight:600;color:var(--rl-text);}
.rl-panel .rl-ph em{font-style:normal;font-size:11.5px;color:var(--rl-text3);}
.rl-panel .rl-pb{padding:14px 16px;}
.rl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
/* 世界地图 */
.rl-map{position:relative;background:linear-gradient(180deg,rgba(13,27,56,.55),rgba(7,13,31,.72));border-radius:10px;overflow:hidden;}
.rl-map svg{display:block;width:100%;height:auto;}
.rl-map .land{fill:rgba(90,160,255,.10);stroke:rgba(90,160,255,.22);stroke-width:.5;}
.rl-map .grat{stroke:rgba(90,160,255,.09);stroke-width:.5;fill:none;}
.rl-map .arc{fill:none;stroke:var(--rl-primary2);stroke-width:.6;opacity:.5;}
.rl-map .dot{fill:var(--rl-primary);opacity:.25;}
.rl-map .mk{fill:var(--rl-red);stroke:#fff;stroke-width:1;cursor:pointer;transition:.15s;}
.rl-map .mk:hover{stroke-width:2;}
.rl-map .mk.hi{fill:var(--rl-orange);} .rl-map .mk.home{fill:var(--rl-green);}
.rl-map .mk-lbl{font-size:9px;fill:var(--rl-text2);}
.rl-country{display:flex;flex-direction:column;gap:2px;}
.rl-country .rc{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 4px;border-radius:6px;}
.rl-country .rc:hover{background:var(--rl-panel2);}
.rl-country .rc .nm{flex:1 1 auto;color:var(--rl-text);} .rl-country .rc .ct{color:var(--rl-text2);font-variant-numeric:tabular-nums;}
.rl-country .rc .cb{width:60px;height:6px;background:var(--rl-panel2);border-radius:4px;overflow:hidden;}
.rl-country .rc .cb i{display:block;height:100%;background:var(--rl-red);border-radius:4px;}
.rl-country .rc .fl{font-size:11px;color:var(--rl-text3);width:22px;text-align:right;}
/* 双折线 */
.rl-dual{width:100%;height:auto;display:block;}
/* 客户端 / 状态分布 */
.rl-clients{display:flex;flex-direction:column;gap:10px;}
.rl-clients .grp .gl{font-size:12px;color:var(--rl-text3);margin-bottom:6px;font-weight:600;}
.rl-clients .row{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:4px 0;}
.rl-clients .row .nm{width:74px;color:var(--rl-text2);} .rl-clients .row .cb{flex:1;height:7px;background:var(--rl-panel2);border-radius:4px;overflow:hidden;}
.rl-clients .row .cb i{display:block;height:100%;background:var(--rl-primary);border-radius:4px;}
.rl-clients .row .vv{width:42px;text-align:right;color:var(--rl-text);font-variant-numeric:tabular-nums;}
/* 攻击防护列表 */
.rl-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--rl-border2);}
.rl-filters .rl-seg{background:var(--rl-panel2);}
.rl-banner{display:flex;align-items:center;gap:10px;background:var(--rl-primary-soft);border:1px solid rgba(55,214,255,.25);border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--rl-text2);}
.rl-banner b{color:var(--rl-primary);}
.rl-tablewrap{overflow-x:auto;}
.rl-table{width:100%;border-collapse:collapse;font-size:13px;}
.rl-table th{position:sticky;top:0;background:#0c1a35;color:var(--rl-text2);font-weight:600;text-align:left;padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--rl-border);font-size:12px;}
.rl-table td{padding:10px 12px;border-bottom:1px solid var(--rl-border2);vertical-align:middle;color:var(--rl-text);}
.rl-table tbody tr{cursor:pointer;transition:.12s;}
.rl-table tbody tr:hover{background:var(--rl-panel2);}
.rl-table tbody tr.open{background:var(--rl-primary-soft);}
.rl-table td.mono{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);color:var(--rl-text);font-size:12.5px;}
.rl-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;}
.rl-pill.block{background:var(--rl-red-soft);color:var(--rl-red);}
.rl-pill.allow{background:var(--rl-green-soft);color:var(--rl-green);}
.rl-pill.watch{background:var(--rl-blue-soft);color:var(--rl-blue);}
.rl-tag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;margin:1px 3px 1px 0;font-weight:600;}
.rl-tag.hi{background:var(--rl-red-soft);color:var(--rl-red);}
.rl-tag.mid{background:var(--rl-orange-soft);color:var(--rl-orange);}
.rl-tag.lo{background:var(--rl-blue-soft);color:var(--rl-blue);}
.rl-tag.c{background:var(--rl-panel2);color:var(--rl-text2);}
.rl-lock{display:inline-block;margin-left:6px;font-size:10px;color:var(--rl-green);background:var(--rl-green-soft);padding:0 5px;border-radius:4px;}
.rl-n{display:flex;align-items:center;gap:8px;}
.rl-n b{font-variant-numeric:tabular-nums;}
.rl-n .nb{flex:1;max-width:96px;height:6px;background:var(--rl-panel2);border-radius:4px;overflow:hidden;}
.rl-n .nb i{display:block;height:100%;background:var(--rl-red);border-radius:4px;}
.rl-region{font-size:11px;color:var(--rl-text3);}
/* 详情弹层 */
.rl-modal-mask{position:fixed;inset:0;background:rgba(3,8,18,.68);backdrop-filter:blur(2px);z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;}
.rl-modal{background:#0c1a35;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.55);width:min(860px,100%);max-width:100%;overflow:hidden;}
.rl-modal .rl-mh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--rl-border);}
.rl-modal .rl-mh h3{margin:0;font-size:16px;color:var(--rl-text);}
.rl-modal .rl-mh .x{cursor:pointer;color:var(--rl-text3);font-size:20px;line-height:1;border:0;background:none;padding:2px 6px;border-radius:6px;}
.rl-modal .rl-mh .x:hover{background:var(--rl-panel2);color:var(--rl-text);}
.rl-modal .rl-mb{padding:18px 20px;display:flex;flex-direction:column;gap:16px;}
.rl-modal .rl-mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.rl-modal .rl-mg .m{background:var(--rl-panel2);border:1px solid var(--rl-border);border-radius:10px;padding:11px 13px;}
.rl-modal .rl-mg .m .k{font-size:11.5px;color:var(--rl-text3);} .rl-modal .rl-mg .m .v{font-size:14px;color:var(--rl-text);margin-top:3px;word-break:break-all;}
.rl-modal .rl-mg .m .v.mono{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:12.5px;}
.rl-modal .rl-sec h5{margin:0 0 8px;font-size:13px;color:var(--rl-text);display:flex;align-items:center;justify-content:space-between;}
.rl-modal pre.rl-payload{background:#0f1b2d;color:#d6e4f0;border-radius:10px;padding:14px 16px;font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:12px;line-height:1.6;overflow:auto;max-height:280px;white-space:pre-wrap;word-break:break-all;margin:0;}
.rl-modal .rl-copy{border:1px solid var(--rl-border);background:var(--rl-panel);color:var(--rl-text2);border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer;}
.rl-modal .rl-copy:hover{border-color:var(--rl-primary);color:var(--rl-primary);}
.rl-modal .rl-fb{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--rl-text2);}
.rl-modal .rl-fb button{border:1px solid var(--rl-border);background:var(--rl-panel);border-radius:7px;padding:5px 12px;cursor:pointer;color:var(--rl-text2);}
.rl-modal .rl-fb button:hover{border-color:var(--rl-orange);color:var(--rl-orange);}
.rl-note{font-size:11.5px;color:var(--rl-text3);line-height:1.6;background:var(--rl-panel2);border:1px dashed var(--rl-border);border-radius:10px;padding:11px 13px;}
@media (max-width:900px){
  .rl-kpis{grid-template-columns:repeat(2,1fr);}
  .rl-grid{grid-template-columns:1fr;}
  .sec-light .sec-shell{flex-direction:column;}
}

/* 说明：早期「浅色主题」为遗留组件刷白的覆盖已移除；
   现统一走 :root 深藏蓝调色板，10 个遗留子页自动回到深色，与整体风格一致。 */

/* 攻击防护列表补：rl-cat / rl-p 样式（雷池风格分布条） */
.rl-cat{margin:9px 0;}
.rl-cat-h{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.rl-cat-h b{margin-left:auto;color:var(--rl-text);font-variant-numeric:tabular-nums;}
.rl-cat-h i{font-style:normal;color:var(--rl-text3);font-size:11.5px;width:44px;text-align:right;}
.rl-cat-b{height:6px;background:var(--rl-panel2);border-radius:4px;margin-top:5px;overflow:hidden;}
.rl-cat-b>span{display:block;height:100%;border-radius:4px;background:var(--rl-text3);}
.rl-cat-b>span.hi{background:var(--rl-red);} .rl-cat-b>span.mid{background:var(--rl-orange);} .rl-cat-b>span.lo{background:var(--rl-blue);}
.rl-p{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid var(--rl-border2);font-size:12.5px;}
.rl-p:last-child{border-bottom:0;} .rl-p code{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rl-text2);}
.rl-p b{color:var(--rl-text);font-variant-numeric:tabular-nums;}
.rl-dg{padding:2px 2px 6px;display:flex;flex-direction:column;gap:12px;}
.rl-dg .rl-mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.rl-dg .rl-mg .m{background:var(--rl-panel2);border:1px solid var(--rl-border);border-radius:9px;padding:9px 11px;}
.rl-dg .rl-mg .k{font-size:11.5px;color:var(--rl-text3);} .rl-dg .rl-mg .v{font-size:13px;color:var(--rl-text);margin-top:2px;word-break:break-all;}
.rl-dg .rl-sec h5{margin:0 0 6px;font-size:12.5px;color:var(--rl-text);display:flex;align-items:center;justify-content:space-between;}
.rl-dg pre.rl-payload{background:#0f1b2d;color:#d6e4f0;border-radius:9px;padding:12px 14px;font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:11.5px;line-height:1.6;overflow:auto;max-height:240px;white-space:pre-wrap;word-break:break-all;margin:0;}
.rl-dg .rl-copy{border:1px solid var(--rl-border);background:var(--rl-panel);color:var(--rl-text2);border-radius:6px;padding:3px 9px;font-size:11.5px;cursor:pointer;}
.rl-dg .rl-copy:hover{border-color:var(--rl-primary);color:var(--rl-primary);}
.rl-dg .rl-fb{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--rl-text2);}
.rl-dg .rl-fb button{border:1px solid var(--rl-border);background:var(--rl-panel);border-radius:6px;padding:4px 11px;cursor:pointer;color:var(--rl-text2);}
.rl-dg .rl-fb button:hover{border-color:var(--rl-orange);color:var(--rl-orange);}
.sec-light .rl-table td.ops{text-align:right;white-space:nowrap;}
.sec-light .rl-table td.ops .btn{margin-left:5px;}

/* ============ 3D 点阵地球 / 图表动画（2026-11-04） ============ */
.rl-globe{position:relative;width:100%;height:338px;border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 50% 46%,rgba(22,48,90,.55),rgba(7,13,31,.85) 70%);}
.rl-globe canvas{display:block;width:100%;height:100%;}
.rl-globe-legend{position:absolute;left:12px;bottom:10px;display:flex;flex-wrap:wrap;gap:10px;
  font-size:11px;color:var(--rl-text3);pointer-events:none;}
.rl-globe-legend span{display:inline-flex;align-items:center;gap:4px;}
.rl-globe-legend i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.rl-maptabs{display:flex;gap:2px;padding:2px;border:1px solid var(--rl-border2);border-radius:7px;background:var(--rl-panel2);}
.rl-maptabs button{border:0;background:transparent;color:var(--rl-text3);font-size:11.5px;padding:3px 10px;border-radius:5px;cursor:pointer;transition:.15s;}
.rl-maptabs button:hover{color:var(--rl-text);}
.rl-maptabs button.on{background:rgba(55,214,255,.16);color:var(--rl-primary);}

/* 折线入场：pathLength=1 归一化，dash 从 1 收到 0 */
.rl-ln{stroke-dasharray:1;stroke-dashoffset:1;animation:rlDraw 1.1s cubic-bezier(.22,.7,.3,1) forwards;}
.rl-ln-atk{animation-delay:.12s;}
@keyframes rlDraw{to{stroke-dashoffset:0;}}
.rl-area{opacity:0;animation:rlFade .9s ease .35s forwards;}
@keyframes rlFade{to{opacity:1;}}
.rl-cursor{animation:rlPulse 1.8s ease-in-out infinite;}
@keyframes rlPulse{0%,100%{opacity:.35;r:2.5}50%{opacity:1;r:4.2}}

/* 2D 地图上的攻击点/弧线也让它活起来 */
.rl-map .mk{animation:rlMkPulse 2.4s ease-in-out infinite;}
.rl-map .mk:nth-child(2n){animation-delay:.4s;}
.rl-map .mk:nth-child(3n){animation-delay:.9s;}
@keyframes rlMkPulse{0%,100%{opacity:.55}50%{opacity:1}}
.rl-map .arc{stroke-dasharray:4 5;animation:rlFlow 1.6s linear infinite;}
@keyframes rlFlow{to{stroke-dashoffset:-18;}}
@media (prefers-reduced-motion:reduce){
  .rl-ln,.rl-area,.rl-cursor,.rl-map .mk,.rl-map .arc{animation:none;opacity:1;stroke-dashoffset:0;}
}

/* 国家行 / 客户端行的次级数字 */
.rl-country .rc .ct{display:inline-flex;align-items:baseline;gap:6px;min-width:66px;justify-content:flex-end;}
.rl-country .rc .ct em{font-style:normal;font-size:10.5px;color:var(--rl-text3);}
.rl-clients .row .vv{display:inline-flex;align-items:baseline;gap:6px;min-width:58px;justify-content:flex-end;}
.rl-clients .row .vv em{font-style:normal;font-size:10.5px;color:var(--rl-text3);}
.rl-peak text{font-size:10px;fill:var(--rl-text3);font-variant-numeric:tabular-nums;}
.rl-dual{overflow:visible;}
/* 趋势图与地球同排：两个面板等高，图在面板内垂直居中，避免下方留大块空白 */
.rl-grid-top>.rl-panel{display:flex;flex-direction:column;}
.rl-grid-top>.rl-panel>.rl-pb{flex:1;display:flex;align-items:center;justify-content:center;}
.rl-grid-top .rl-globe{width:100%;}
.rl-grid-top .rl-dual{width:100%;}

/* ---- 网站详情：访问分析内嵌页 ----
   #app 是统一滚动容器。原本 .page 为 flex + min-height:0、.panel 为
   min-height:0 + overflow:hidden，会把 iframe 的 2200px 内容压进 560px 并裁掉，
   且 #app.scrollHeight 不增长 → 页面根本滚不下去（用户看到「显示不全」）。
   详情页改块级流，让 iframe 真实高度撑开页面，由 #app 统一滚动。 */
.page.site-detail{display:block;min-height:auto;flex:0 0 auto;overflow:visible}
.page.site-detail>*{margin-bottom:clamp(9px,1vw,14px)}
.site-traffic-panel{flex:initial;min-height:auto;overflow:visible;margin-top:14px;margin-bottom:0}
.site-traffic-panel .p-hd{flex-wrap:wrap}
.site-traffic-panel .st-links{display:flex;gap:14px;font-size:12px;white-space:nowrap}
.site-traffic-panel .p-body{flex:initial;min-height:auto;padding:0;display:block;overflow:visible;border-radius:0 0 10px 10px}
.site-traffic-frame{display:block;width:100%;height:900px;border:0;background:transparent}