:root{
  --navy:#0C447C; --navy2:#185FA5; --navy3:#E6F1FB;
  --purple:#534AB7; --purple3:#EEEDFE;
  --green:#0F6E56; --green3:#E1F5EE;
  --amber:#854F0B; --amber3:#FAEEDA;
  --red:#A32D2D; --red3:#FCEBEB;
  --gray:#5F5E5A; --gray3:#F1EFE8;
  --text:#2C2C2A; --sub:#5F5E5A; --line:#E3E1D9;
  --card:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#F7F6F2;color:var(--text);font-size:14px;line-height:1.6;min-height:100vh}
a{text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* 顶部品牌 */
header{background:linear-gradient(135deg,#042C53,#0C447C 55%,#185FA5);color:#fff;padding:22px 0}
.brand{display:flex;align-items:center;gap:16px}
.logo{width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;letter-spacing:1px;border:1px solid rgba(255,255,255,.35)}
.brand h1{font-size:22px;font-weight:700;letter-spacing:1px}
.brand p{font-size:13px;color:rgba(255,255,255,.8);margin-top:3px}
.hb{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px}
.hb .lock{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:3px 10px}
.hb .logout{color:#fff;background:rgba(255,255,255,.2);border-radius:6px;padding:3px 10px}

/* 全局导航 */
nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.navwrap{display:flex;gap:6px;flex-wrap:wrap;padding:9px 20px;align-items:center;overflow:visible}
/* 分组下拉（大厂控制台式） */
.nav-group{position:relative;flex:0 0 auto}
.nav-gbtn{display:flex;align-items:center;gap:5px;padding:7px 13px;border:none;background:transparent;border-radius:7px;white-space:nowrap;color:var(--sub);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;line-height:1.4}
.nav-gbtn:hover{background:var(--navy3);color:var(--navy)}
.nav-gbtn.active{background:var(--navy);color:#fff}
.nav-gbtn .caret{font-size:10px;opacity:.7;margin-left:1px}
.nav-drop{display:none;position:absolute;top:100%;left:0;min-width:188px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:6px;margin-top:5px;z-index:60}
.nav-group.open .nav-drop,.nav-group:hover .nav-drop{display:block}
.nav-drop a{display:block;padding:9px 12px;border-radius:7px;color:var(--sub);font-size:13px;white-space:nowrap}
.nav-drop a:hover{background:var(--navy3);color:var(--navy)}
.nav-drop a.on{background:var(--navy);color:#fff}
.nav-group.grp-on > .nav-gbtn:not(.active){box-shadow:inset 0 -2px 0 var(--navy)}

/* 区块 */
main{padding:24px 0 60px}
.sec-title{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.sec-no{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex:0 0 34px}
.sec-title h2{font-size:20px;font-weight:700}
.sec-sub{color:var(--sub);font-size:13px;margin:2px 0 18px 46px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.card h3{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}

/* 徽章 */
.b{display:inline-block;font-size:11px;border-radius:5px;padding:2px 8px;font-weight:500;white-space:nowrap;line-height:1.6}
.b-nav{background:var(--navy3);color:var(--navy)}
.b-pur{background:var(--purple3);color:var(--purple)}
.b-grn{background:var(--green3);color:var(--green)}
.b-amb{background:var(--amber3);color:var(--amber)}
.b-red{background:var(--red3);color:var(--red)}
.b-gry{background:var(--gray3);color:var(--gray)}

/* 指标卡 */
.metric{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.metric .m{background:var(--navy3);border:1px solid #C9DDF4;border-radius:12px;padding:14px 16px}
.metric .l{font-size:12px;color:var(--navy)}
.metric .v{font-size:26px;font-weight:700;margin-top:4px;color:var(--navy)}
.metric .v small{font-size:12px;font-weight:400;color:var(--sub)}
@media(max-width:760px){.metric{grid-template-columns:repeat(2,1fr)}}

/* 子标签 */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs .t{font-size:13px;color:var(--sub);background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.tabs .t.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* 行列表 */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed #EDEBE4;font-size:13px}
.row:last-child{border-bottom:none}
.row .k{color:var(--text)}
.row .v{color:var(--sub);text-align:right}
.row .sub{color:#888780;font-size:11px}

/* 条形 */
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12px}
.bar-row .n{width:84px;color:var(--sub);flex:0 0 84px}
.bar-track{flex:1;background:var(--gray3);border-radius:5px;height:16px;overflow:hidden}
.bar-fill{height:100%;border-radius:5px}
.bar-row .p{width:38px;text-align:right;color:var(--sub)}

/* KV 网格 */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.kv .it{background:var(--gray3);border-radius:9px;padding:10px 12px}
.kv .l{font-size:11px;color:var(--sub)}
.kv .v{font-size:15px;font-weight:700;margin-top:2px}

/* 开关 */
.toggle{width:34px;height:19px;border-radius:10px;background:#1D9E75;position:relative;display:inline-block;cursor:pointer;transition:.15s}
.toggle:after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.15s}
.toggle.off{background:#C9C7BE}
.toggle.off:after{right:auto;left:2px}

/* 按钮 */
.btn{display:inline-block;font-size:12px;padding:6px 14px;border-radius:8px;border:1px solid var(--line);color:var(--sub);cursor:pointer;background:#fff;margin:2px 4px 2px 0}
.btn:hover{border-color:var(--navy)}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.primary:hover{background:var(--navy2)}
.btn.danger{color:var(--red);border-color:#E5B5B5}
.btn.danger:hover{background:var(--red3)}
.btn:disabled{opacity:.5;cursor:default}

/* 曲线 */
.svg-line{width:100%;height:120px;background:linear-gradient(180deg,#F4F9FE,#fff);border:1px solid var(--line);border-radius:10px}

/* 代码块 */
.code{font-family:Consolas,monospace;font-size:18px;letter-spacing:5px;background:var(--gray3);border-radius:9px;padding:12px 14px;margin-top:4px}
.box-note{background:var(--gray3);border-radius:9px;padding:12px 14px;font-size:13px;color:var(--sub);margin-top:10px}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--navy3);color:var(--navy);font-weight:700;text-align:left;padding:9px 12px;border:1px solid #D6E4F5}
td{padding:9px 12px;border:1px solid var(--line);vertical-align:top}
tr:nth-child(even) td{background:#FBFBFA}

/* 输入框 */
input,textarea,select{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--line);font-size:13px;font-family:inherit;outline:none;margin-bottom:10px}
input:focus,textarea:focus,select:focus{border-color:var(--navy)}
.empty{color:var(--sub);font-size:13px;padding:14px 0;text-align:center}
.pill{display:inline-block;font-size:11px;border-radius:20px;padding:2px 10px;background:var(--navy3);color:var(--navy);margin:2px}

/* 通用分页条（zsk 风格包） */
.zsk-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.zsk-pg-info{font-size:13px;color:var(--sub);margin-right:6px}
.zsk-pg-btn{border:1px solid var(--line);background:#fff;color:var(--navy);padding:4px 11px;border-radius:7px;cursor:pointer;font-size:13px;font-family:inherit;min-width:34px}
.zsk-pg-btn:hover:not(:disabled){background:var(--navy3)}
.zsk-pg-btn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.zsk-pg-btn:disabled{opacity:.45;cursor:not-allowed}
.zsk-pg-ell{color:var(--sub);padding:0 3px}
.zsk-pg-size{border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:13px;color:var(--navy);background:#fff;margin-left:4px}

/* 统一帮助中心机制（ZSKHelp）· 所有后台复用 */
.zsk-help-btn{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;padding:3px 10px;font-size:13px;cursor:pointer;font-family:inherit}
.zsk-help-btn:hover{background:rgba(255,255,255,.34)}
.zsk-help-mask{position:fixed;inset:0;background:rgba(12,24,40,.45);z-index:99990;display:none}
.zsk-help-mask.show{display:block}
.zsk-help-drawer{position:absolute;top:0;right:0;height:100%;width:440px;max-width:92vw;background:#fff;box-shadow:-12px 0 40px rgba(0,0,0,.25);display:flex;flex-direction:column;animation:zskHelpIn .2s ease}
@keyframes zskHelpIn{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.zsk-help-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line,#E3E1D9);background:linear-gradient(135deg,#042C53,#0C447C)}
.zsk-help-title{color:#fff;font-size:16px;font-weight:700}
.zsk-help-close{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;width:30px;height:30px;cursor:pointer;font-size:14px}
.zsk-help-close:hover{background:rgba(255,255,255,.34)}
.zsk-help-sub{padding:8px 18px;color:var(--sub,#5F5E5A);font-size:12px;background:var(--navy3,#E6F1FB)}
.zsk-help-search{margin:12px 18px;padding:9px 12px;border:1px solid var(--line,#E3E1D9);border-radius:8px;font-size:13px;font-family:inherit;outline:none}
.zsk-help-search:focus{border-color:var(--navy,#0C447C)}
.zsk-help-list{flex:1;overflow:auto;padding:0 18px 20px}
.zsk-help-item{border:1px solid var(--line,#E3E1D9);border-radius:12px;padding:13px 15px;margin-bottom:10px;background:#fff}
.zsk-help-item:hover{border-color:var(--navy,#0C447C)}
.zsk-help-q{font-size:14px;font-weight:700;color:var(--navy,#0C447C);margin-bottom:6px}
.zsk-help-a{font-size:13px;color:var(--text,#2C2C2A);line-height:1.7}
.zsk-help-empty{color:var(--sub,#5F5E5A);font-size:13px;text-align:center;padding:24px 0}

/* ===== 手机端横向溢出兜底（2026-09-14 全局新增）=====
   背景：390px 手机视口下多个后台页被表格/宽内容撑破（devices 225px、errors 271px、
   brain 129px、roles 135px、qwen 59px、governance 52px、token-settings 44px…），
   而本页此前只有 1 个 media query。统一在此兜底，避免逐页修补。
   做法：宽内容改为「可横向滚动」而非隐藏（不丢数据）。 */
@media(max-width:900px){
  .wrap{padding:0 12px}
  /* 表格横向滚动（保留 thead/tbody 语义，列宽按内容自适应） */
  .wrap table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;width:auto;min-width:100%}
  table th,table td{padding:7px 8px;word-break:break-word}
  /* 列宽下限（2026-09-17）：上面 .wrap span{overflow-wrap:anywhere} 让单元格 min-content=1 字符，
     配合 table{width:100%} → 窄屏列被压成「逐字竖排」（实测 brain 279 / qwen 360 / token-meter 185 个
     被压扁单元格，最窄 30px）。给单元格设下限 64px，超宽时由 overflow-x:auto 横向滚动，不再压扁。 */
  table th,table td{min-width:64px}
  /* 长串/超长词不撑破容器：路径/URL/标识**没有空格**，word-break:break-word 对它们无效，
     必须 overflow-wrap:anywhere（实测 errors.html 里 572px 的 KB 文件路径即此因） */
  .wrap span,.wrap div,.wrap p,.wrap li,.wrap b,.wrap code{word-break:break-word;overflow-wrap:anywhere}
  .wrap code,.wrap a{overflow-wrap:anywhere}
  /* 代码块与画布自适应 */
  .wrap pre{overflow-x:auto;max-width:100%;white-space:pre;font-size:12px}
  .wrap canvas{max-width:100%;height:auto}
  /* 输入类控件不超出 */
  input,select,textarea{max-width:100%}
  /* 行列表（errors/roles 等页大量使用）：.row 为 flex 且右侧徽章 nowrap，
     手机端左侧标题不收缩 → 实测溢出 263px。改为可换行 + 允许收缩。 */
  .row{flex-wrap:wrap;align-items:flex-start}
  .row>*{min-width:0;max-width:100%}
  .row .k{flex:1 1 auto;word-break:break-word}
  /* 徽章默认 white-space:nowrap；内容为长路径时（errors.html 实测）会撑破整页 → 手机端允许换行 */
  .row .b,.b{white-space:normal;overflow-wrap:anywhere}
  /* 例外（2026-09-17）：表格内的徽章恢复 nowrap。表格本身已 display:block + overflow-x:auto，
     可横向滚动，无需断行；不恢复则窄列被压成「逐字换行」（access-audit 实测 kb_list 竖排）。
     注：此规则须放在 .row .b,.b 之后，且选择器特异性 table .b > .b。 */
  table .b{white-space:nowrap;overflow-wrap:normal}
  .row .v{text-align:left}
  .metric{min-width:0}
  .card{min-width:0}
}