/* IAC IT 内部审计平台 — 设计系统
   沿用人力·财务数字化平台的 executive glass UI:
   琥珀主色 + 玻璃拟态面板 + 径向光晕 + 细噪点。两套内部系统观感统一。 */

:root {
  /* 主色:IAC 橙 */
  --accent: #F59E0B;
  --accent-strong: #A45A00;
  --accent-soft: #FFF4DD;
  --accent-dim: rgba(245, 158, 11, .18);
  --accent-grad: linear-gradient(135deg, #FFB020 0%, #F59E0B 46%, #D97706 100%);

  --ground: #F4F6FA;
  --panel: rgba(255, 255, 255, .86);
  --hair: rgba(15, 23, 42, .075);
  --hair-strong: rgba(15, 23, 42, .14);

  --ink: #0F172A;
  --ink2: #334155;
  --muted: #64748B;
  --ring: rgba(245, 158, 11, .24);

  --crit: #E5484D;
  --crit-soft: #FDEDEE;

  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 0 rgba(255, 255, 255, .80) inset;
  --sh-2: 0 10px 28px rgba(15, 23, 42, .08), 0 1px 0 rgba(255, 255, 255, .84) inset;
  --sh-3: 0 24px 70px rgba(15, 23, 42, .14), 0 1px 0 rgba(255, 255, 255, .88) inset;
  --sh-accent: 0 10px 24px rgba(217, 119, 6, .26),
               0 1px 0 rgba(255, 255, 255, .30) inset;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #app { height: 100%; }

body {
  font-family: "Noto Sans SC", system-ui, -apple-system, "PingFang SC",
               "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -.006em;
  color: var(--ink2);
  background:
    radial-gradient(920px 520px at 8% -8%, rgba(245, 158, 11, .14), transparent 64%),
    radial-gradient(760px 420px at 96% 8%, rgba(59, 130, 246, .10), transparent 58%),
    linear-gradient(180deg, #FBFCFF 0%, #F2F5FA 46%, #EEF2F7 100%);
}

/* 细噪点:破除数码平板感,让玻璃面板有实体质地 */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

/* ---------- 登录页 ---------- */

.login-page {
  position: relative; isolation: isolate;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 11vh 1rem 3rem;
  background:
    radial-gradient(860px 520px at 50% 18%, rgba(245, 158, 11, .15), transparent 66%),
    radial-gradient(680px 460px at 82% 78%, rgba(59, 130, 246, .10), transparent 62%),
    linear-gradient(135deg, #FBFCFF 0%, #F2F5FA 100%);
}

.login-page::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(680px 460px at 50% 48%, rgba(245, 158, 11, .05), transparent 68%),
    radial-gradient(900px 600px at 84% 90%, rgba(245, 158, 11, .03), transparent 70%);
}

.login-hero { text-align: center; margin-bottom: 1.8rem; }

.login-hero img.logo {
  height: 64px; display: block; margin: 0 auto 6px;
  filter: drop-shadow(0 16px 32px rgba(15, 23, 42, .12));
}

.login-hero .t {
  font-size: 1.78rem; font-weight: 850; letter-spacing: -.025em;
  color: var(--ink);
}

.login-hero .s {
  margin-top: 7px; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .24em; color: #8A95A5;
}

/* AI 上标徽标(品牌名后缀) */
.ai-tag {
  font-family: var(--mono); font-size: .5em; font-weight: 800;
  color: var(--accent); letter-spacing: .08em;
  margin-left: .3em; vertical-align: .75em;
}

.login-card {
  width: 390px; max-width: 100%;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  padding: 1.9rem 1.75rem 1.65rem;
  box-shadow: var(--sh-3), 0 0 0 1px rgba(15, 23, 42, .045);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

label.fld {
  display: block; font-size: .78rem; font-weight: 700;
  color: #475569; letter-spacing: .02em;
  margin: .75rem 0 .35rem;
}

.input {
  width: 100%; min-height: 38px;
  padding: .52rem .85rem;
  font: inherit; font-size: .9rem; color: var(--ink);
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .78) inset;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.input::placeholder { color: #A6ABB5; }
.input:hover { border-color: rgba(15, 23, 42, .22); background: #fff; }

.input:focus {
  outline: none;
  border-color: rgba(245, 158, 11, .78);
  box-shadow: 0 0 0 4px var(--ring);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 36px; padding: .46rem 1.05rem;
  font: inherit; font-size: .88rem; font-weight: 660;
  color: var(--ink); white-space: nowrap; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .90));
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  box-shadow: var(--sh-1);
  transition: all .16s var(--ease);
}

.btn.primary {
  background: var(--accent-grad); border: 0; color: #fff;
  box-shadow: var(--sh-accent);
}

.btn.primary:hover:not(:disabled) {
  filter: brightness(1.04);
  box-shadow: 0 14px 32px rgba(217, 119, 6, .32);
  transform: translateY(-1px);
}

.btn.primary:active:not(:disabled) {
  transform: translateY(1px) scale(.99);
  box-shadow: var(--sh-1);
}

.btn:disabled {
  background: #EFF0F3; color: var(--muted);
  border: 1px solid var(--hair);
  box-shadow: none; cursor: not-allowed; filter: none; transform: none;
}

.btn:focus-visible, .input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.login-card .btn.primary {
  width: 100%; height: 44px; margin-top: 1.2rem;
  border-radius: 14px;
  font-size: .92rem; letter-spacing: .3em; text-indent: .3em;
}

.alert {
  margin: .9rem 0 0;
  padding: .75rem 1.05rem;
  font-size: .88rem; line-height: 1.65;
  border: 1px solid rgba(255, 255, 255, .66);
  border-radius: 14px;
  box-shadow: var(--sh-1);
}

.alert.error { background: var(--crit-soft); color: #C0353A; }

.login-foot {
  margin-top: 1.4rem;
  font-size: .78rem; color: var(--muted); text-align: center;
}

.app-ver {
  margin-top: 1.1rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .04em; color: var(--muted); text-align: center;
}

/* 0.44.2:版本号可见性 —— 登录页标题区徽标 + 内页顶栏右侧标签 */
.login-ver {
  margin-top: .7rem; display: inline-block;
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .05em; color: var(--ink);
  border: 1px solid var(--hair-strong, rgba(28,25,23,.25));
  border-radius: 999px; padding: 2px 12px;
}

.ver-tag {
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; color: var(--muted);
  border: 1px solid rgba(28,25,23,.16); border-radius: 999px;
  padding: 2px 10px; cursor: pointer; user-select: none;
}
.ver-tag:hover { color: var(--accent-strong, #b45309); border-color: currentColor; }

/* 键盘用户的跳转锚点 */
.skip-link {
  position: absolute; left: -9999px;
  padding: .5rem 1rem; border-radius: 8px;
  background: var(--panel); color: var(--ink);
}

.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }

@media (max-width: 460px) {
  .login-page { padding-top: 7vh; }
  .login-hero .t { font-size: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════
   主界面外壳 —— 侧边栏 + 内容区
   ══════════════════════════════════════════════════════════════════ */

.shell { display: flex; min-height: 100%; }

.sidebar {
  width: 224px; flex: none; padding: 18px 14px 14px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, .72);
  border-right: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.side-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 14px; }
.side-brand img { height: 26px; }
.side-brand .name {
  font-size: .84rem; font-weight: 800; color: var(--ink); line-height: 1.25;
}

.side-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em;
  color: #94A3B8; margin: 12px 6px 5px; text-transform: uppercase;
}

.side-item {
  display: flex; align-items: center; gap: 8px;
  padding: .48rem .7rem; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink2);
  font: inherit; font-size: .85rem; font-weight: 600;
  text-align: left; cursor: pointer; width: 100%;
  transition: background .14s, color .14s;
}

.side-item:hover { background: rgba(15, 23, 42, .05); color: var(--ink); }

.side-item.active {
  background: var(--accent-soft); color: var(--accent-strong);
  box-shadow: inset 2px 0 0 var(--accent);
}

.side-item .n {
  margin-left: auto; font-family: var(--mono); font-size: .7rem;
  font-weight: 700; color: var(--crit);
}

.side-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair);
  font-size: .74rem; color: var(--muted);
}

.main { flex: 1; min-width: 0; padding: 26px 30px 60px; overflow-x: hidden; }

.page-head { margin-bottom: 18px; }
.page-head h1 {
  font-size: 1.32rem; font-weight: 820; color: var(--ink);
  letter-spacing: -.02em;
}
.page-head .sub { margin-top: 4px; font-size: .82rem; color: var(--muted); }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt1 { margin-top: 14px; }
.mb1 { margin-bottom: 12px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.num  { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 面板与统计卡 ---------- */

.panel {
  background: var(--panel); border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(15, 23, 42, .045);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.panel h2 { font-size: .95rem; font-weight: 740; color: var(--ink); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }

.tile {
  background: var(--panel); border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 16px; padding: 14px 16px;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(15, 23, 42, .045);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.tile .k { font-size: .74rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.tile .v {
  margin-top: 5px; font-family: var(--mono); font-size: 1.62rem;
  font-weight: 700; color: var(--ink); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tile .v.crit { color: var(--crit); }
.tile .v.warn { color: #B45309; }
.tile .v.good { color: #0BA05E; }
.tile .d { margin-top: 3px; font-size: .72rem; color: var(--muted); }

/* ---------- 表格 ---------- */

.tbl {
  background: var(--panel); border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(15, 23, 42, .045);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.tbl .scroll { overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tbl th {
  padding: .6rem .8rem; text-align: left; white-space: nowrap;
  font-size: .74rem; font-weight: 750; color: #475569;
  letter-spacing: .02em; background: rgba(248, 250, 252, .7);
  border-bottom: 1px solid var(--hair);
}
.tbl td {
  padding: .55rem .8rem; border-bottom: 1px solid rgba(15, 23, 42, .05);
  color: var(--ink2); vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(255, 244, 221, .48); }
.tbl tr.drillable { cursor: pointer; }
.tbl tr.drillable:hover td:first-child { color: var(--accent-strong); }
.wrap { white-space: normal; min-width: 260px; }

/* ---------- 徽章 ---------- */

.chip {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 750; letter-spacing: .02em;
  white-space: nowrap;
}
.chip.critical { background: #FEE2E2; color: #B91C1C; }
.chip.high     { background: #FFEDD5; color: #C2410C; }
.chip.medium   { background: #FEF3C7; color: #92400E; }
.chip.low      { background: #E0F2FE; color: #075985; }
.chip.fail     { background: var(--crit-soft); color: #C0353A; }
.chip.pass     { background: #E7F7EF; color: #08834D; }
.chip.unknown  { background: #E2E8F0; color: #475569; }
.chip.ok       { background: #E7F7EF; color: #08834D; }
.chip.bad      { background: var(--crit-soft); color: #C0353A; }
.chip.warn     { background: #FFF6E6; color: #B45309; }
/* 可点的 chip(人员登录明细入口):看起来还是徽标,行为是按钮 */
.chip-btn { border: 0; cursor: pointer; font-family: inherit; }
.chip-btn:hover { filter: brightness(.94); }

/* ---------- 详情抽屉 ---------- */

.mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, .34);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end;
}
.drawer {
  width: min(760px, 94vw); height: 100%; overflow-y: auto;
  padding: 22px 26px 40px; background: #fff;
  box-shadow: -20px 0 60px rgba(15, 23, 42, .18);
}
.drawer h2 { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.drawer .kv { margin-top: 14px; }
.drawer .kv .k {
  font-size: .72rem; font-weight: 750; color: #64748B;
  letter-spacing: .04em; text-transform: uppercase;
}
.drawer .kv .v { margin-top: 3px; font-size: .86rem; color: var(--ink2); }
.drawer pre {
  margin-top: 5px; padding: 12px 14px; border-radius: 12px;
  background: #0F172A; color: #CBD5E1;
  font-family: var(--mono); font-size: .74rem; line-height: 1.55;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

.alert.warn { background: #FFF6E6; color: #B45309; }
.alert.info { background: var(--accent-soft); color: var(--accent-strong); }

/* ★ 加载指示全站统一走这一个类(30 处):转圈在这里加,全站生效。
     需求方 0.32.1 反馈:纯文字「加载中…」不够显著,数据拉取时
     要一眼看出「正在工作」。 */
.loading { padding: 40px; text-align: center; color: var(--muted); }
/* 0.41.1:整区切换的大转圈(厂区/视角切换时替代「空一阵」) */
.loading.big { padding: 90px 0; font-size: 1.05rem; }
.loading.big::before { width: 22px; height: 22px; border-width: 3px;
                       vertical-align: -5px; }
.loading::before {
  content: ''; display: inline-block; width: 22px; height: 22px;
  margin-right: 10px; vertical-align: -5px;
  border: 3px solid var(--line, #E7E2D8);
  border-top-color: var(--accent-strong, #A45A00);
  border-radius: 50%;
  animation: loadspin .8s linear infinite;
}
@keyframes loadspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading::before { animation: none; border-top-color: var(--muted); }
}
.empty   { padding: 34px; text-align: center; color: var(--muted); font-size: .86rem; }

/* ★ 主机选择器:一行一台(0.34.0,需求方)—— 芯片云平铺找不到机器,
     改成纵向列表;200 台上限内滚动,选中行高亮。 */
.host-list { border: 1px solid var(--hair-strong); border-radius: 10px;
  max-height: 440px; overflow-y: auto; background: var(--panel); }
.host-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 12px; cursor: pointer; font-size: .8rem;
  border-bottom: 1px solid var(--hair); }
.host-row:last-child { border-bottom: 0; }
.host-row:hover { background: rgba(245, 158, 11, .07); }
.host-row.on { background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent-strong); }
.host-row .host-name { font-family: var(--mono); font-size: .76rem;
  font-weight: 600; }
/* 主机行展开箭头与详情面板(0.42.1):说明性信息收进面板,行上只留行动信息 */
.host-row .host-x { cursor: pointer; color: var(--muted); font-size: .68rem;
  width: 14px; flex: none; user-select: none; text-align: center; }
.host-row .host-x:hover { color: var(--accent-strong); }
.host-ext { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 5px 12px 7px 34px; font-size: .74rem; color: var(--muted);
  border-bottom: 1px solid var(--hair); background: rgba(15, 23, 42, .025); }
.host-ext b { color: var(--ink); font-weight: 600; margin-right: 2px; }
.host-ext .grp-tag { margin-left: 3px; }

/* 侧边栏:建设中与角标 */
.side-item.todo { color: #94A3B8; }
.side-item.todo:hover { background: rgba(15, 23, 42, .035); }
.side-item .soon {
  margin-left: auto; font-size: .62rem; font-weight: 700;
  color: #94A3B8; letter-spacing: .04em;
}
.sidebar { overflow-y: auto; }
.side-label:first-of-type { margin-top: 2px; }

/* ── 说明面板 ─────────────────────────────────────────────────────
   ★ 每个涉及判定的页面顶部都挂一个。默认收起,点开是完整规则。
   规则本身由后端 /api/meta/criteria 返回 —— 界面上写的,
   就是程序真正在用的那一份。 */
.explain {
  border: 1px solid rgba(245, 158, 11, .30);
  background: linear-gradient(180deg, rgba(255, 251, 240, .96), rgba(255, 247, 231, .88));
  border-radius: 12px; margin-bottom: 14px; overflow: hidden;
}
.explain > summary {
  cursor: pointer; padding: 10px 14px; font-size: .82rem; font-weight: 600;
  color: #92400E; list-style: none; display: flex; align-items: center; gap: 8px;
}
.explain > summary::-webkit-details-marker { display: none; }
.explain > summary::before {
  content: '?'; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent, #F59E0B); color: #fff; font-size: .68rem; font-weight: 700;
}
.explain > summary::after { content: '▾'; margin-left: auto; opacity: .55; font-size: .7rem; }
.explain[open] > summary::after { content: '▴'; }
.explain > summary .tag {
  margin-left: 6px; font-weight: 500; font-size: .72rem; opacity: .72;
}
.explain .body {
  padding: 2px 16px 16px; font-size: .8rem; line-height: 1.72; color: #4A3A22;
  border-top: 1px solid rgba(245, 158, 11, .18);
}
.explain .body h4 {
  margin: 15px 0 6px; font-size: .8rem; color: #7C2D12;
  display: flex; align-items: center; gap: 7px;
}
.explain .body h4::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px;
  background: var(--accent, #F59E0B);
}
.explain .body h4:first-child { margin-top: 8px; }
.explain .body table { width: 100%; border-collapse: collapse; font-size: .77rem; }
.explain .body th {
  text-align: left; padding: 5px 9px; font-weight: 600; color: #7C2D12;
  border-bottom: 1px solid rgba(245, 158, 11, .28); white-space: nowrap;
}
.explain .body td {
  padding: 5px 9px; vertical-align: top;
  border-bottom: 1px solid rgba(245, 158, 11, .13);
}
.explain .body .warn {
  background: rgba(220, 38, 38, .07); border-left: 3px solid #DC2626;
  padding: 8px 12px; border-radius: 0 7px 7px 0; margin: 9px 0; color: #7F1D1D;
}
.explain .body .note {
  background: rgba(255, 255, 255, .7); border-left: 3px solid rgba(245, 158, 11, .55);
  padding: 8px 12px; border-radius: 0 7px 7px 0; margin: 9px 0;
}
.explain .body code {
  background: rgba(120, 80, 20, .09); padding: 1px 5px; border-radius: 4px;
  font-family: var(--mono, ui-monospace, monospace); font-size: .93em;
}

/* 变更记录 */
.chg { border-left: 2px solid rgba(245,158,11,.30); padding-left: 18px; margin-left: 5px; }
.chg-item { position: relative; padding: 0 0 22px 4px; }
.chg-item::before {
  content: ''; position: absolute; left: -24px; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent, #F59E0B);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}
.chg-item.break::before { background: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.16); }
.chg-item.fix::before   { background: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.chg-item.doc::before   { background: #64748B; box-shadow: 0 0 0 3px rgba(100,116,139,.16); }
.chg-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.chg-h b { font-size: .92rem; }
.chg-meta { font-size: .74rem; color: var(--muted, #78716C); }
.chg-body { font-size: .81rem; line-height: 1.74; margin-top: 7px; color: #44403C; }
.chg-body ul { margin: 4px 0 0; padding-left: 19px; }
.chg-body .lbl { font-weight: 600; color: #7C2D12; }
.chg-files { margin-top: 7px; font-size: .72rem; color: var(--muted, #78716C); }

/* ── 安全域标签 ───────────────────────────────────────────────── */
.dom-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.dom {
  border: 1px solid var(--line, #E7E2D8); background: #fff;
  border-radius: 999px; padding: 5px 12px; font-size: .78rem; cursor: pointer;
  color: var(--ink, #292524); display: inline-flex; align-items: center; gap: 6px;
  transition: all .12s;
}
.dom:hover { border-color: var(--accent, #F59E0B); }
.dom b { font-variant-numeric: tabular-nums; opacity: .62; font-weight: 600; }
.dom.on {
  background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff;
  border-color: transparent;
}
.dom.on b { opacity: .88; }
.dom.other { border-style: dashed; opacity: .82; }
.dom .hot {
  background: #DC2626; color: #fff; border-radius: 999px; font-style: normal;
  font-size: .64rem; padding: 1px 6px; font-weight: 700;
}
.panel h2 { font-size: .92rem; margin: 0 0 8px; }

/* ── 页头右上角的「说明」入口 ─────────────────────────────────────
   ★ 之前说明面板是整条横在页面顶上的,占地方,而且每页都摊开一大块。
     改成页头右上角一个常驻按钮:平时不占地方,想看点开。 */
.page-head { position: relative; }
.help-btn {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(245,158,11,.34);
  background: linear-gradient(180deg,#FFFBF0,#FFF6E4);
  color: #92400E; border-radius: 999px; padding: 5px 13px;
  font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .12s;
}
.help-btn:hover { border-color: var(--accent,#F59E0B);
  box-shadow: 0 2px 8px rgba(245,158,11,.18); }
.help-btn::before {
  content: '?'; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent,#F59E0B); color: #fff; font-size: .66rem; font-weight: 700;
}
.help-btn.on { background: var(--accent,#F59E0B); color: #fff; border-color: transparent; }
.help-btn.on::before { background: rgba(255,255,255,.28); }

/* ── ATT&CK 攻击链矩阵 ───────────────────────────────────────── */
.chain { display: flex; flex-direction: column; gap: 5px; }
.chain-row {
  display: grid; grid-template-columns: 26px 150px 1fr 84px;
  align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line,#E7E2D8); border-radius: 9px; background: #fff;
  cursor: pointer; transition: all .12s;
}
.chain-row:hover { border-color: var(--accent,#F59E0B); }
.chain-row.blind {
  background: repeating-linear-gradient(45deg, #FAFAF9, #FAFAF9 7px,
              #F5F5F4 7px, #F5F5F4 14px);
  border-style: dashed; border-color: rgba(220,38,38,.36);
}
.chain-row.open { border-color: var(--accent,#F59E0B); background: #FFFDF7; }
.chain-n { font-size: .68rem; color: var(--muted,#78716C);
  font-variant-numeric: tabular-nums; text-align: right; }
.chain-name b { font-size: .86rem; }
.chain-name span { display: block; font-size: .68rem; color: var(--muted,#78716C);
  font-family: var(--mono, ui-monospace, monospace); }
.chain-bar { height: 16px; border-radius: 4px; position: relative;
  background: rgba(0,0,0,.04); overflow: hidden; }
.chain-bar i { position: absolute; inset: 0 auto 0 0; display: block;
  background: linear-gradient(90deg,#F59E0B,#D97706); border-radius: 4px; }
.chain-cnt { text-align: right; font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.chain-row.blind .chain-cnt { color: #DC2626; font-size: .74rem; }
.chain-detail {
  margin: -2px 0 6px 36px; padding: 10px 14px; font-size: .78rem;
  border-left: 2px solid rgba(245,158,11,.4); background: rgba(255,251,240,.7);
  border-radius: 0 8px 8px 0; line-height: 1.7;
}
.chain-detail .need { color: #7F1D1D; }

/* ── 厂区 / 数据源配置 ────────────────────────────────────────── */
.site-card {
  border: 1px solid var(--line, #E7E2D8); border-radius: 12px;
  background: #fff; padding: 14px 16px; margin-bottom: 12px;
}
.site-card.sel { border-color: var(--accent, #F59E0B);
  box-shadow: 0 2px 10px rgba(245,158,11,.14); }
.site-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-head b { font-size: .96rem; }
.site-code {
  font-family: var(--mono, ui-monospace, monospace); font-size: .72rem;
  background: rgba(245,158,11,.14); color: #92400E;
  padding: 2px 8px; border-radius: 5px; font-weight: 600;
}
.ds-row {
  display: grid; grid-template-columns: 150px 1fr 160px 90px 120px;
  gap: 10px; align-items: center; padding: 9px 12px; font-size: .8rem;
  border-top: 1px solid var(--line, #E7E2D8);
}
.ds-row:hover { background: rgba(255,251,240,.7); }
.ds-miss {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px dashed rgba(220,38,38,.42); color: #B91C1C;
  background: rgba(254,242,242,.6); border-radius: 7px;
  padding: 4px 10px; font-size: .74rem; cursor: pointer;
}
.ds-miss:hover { background: rgba(254,226,226,.8); }
.fp { font-family: var(--mono, ui-monospace, monospace); font-size: .7rem;
      color: var(--muted, #78716C); }
.modal-bg {
  position: fixed; inset: 0; background: rgba(28,25,23,.42);
  display: flex; align-items: center; justify-content: center; z-index: 60;
  backdrop-filter: blur(2px);
}
.modal {
  background: #fff; border-radius: 14px; width: min(640px, 92vw);
  max-height: 88vh; overflow: auto; padding: 20px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}
.modal h2 { margin: 0 0 4px; font-size: 1.02rem; }
.modal.wide { width: min(860px, 94vw); }

/* ── 整站顶栏 / 简繁切换(0.41.0)────────────────────────────── */
.top-strip { display: flex; justify-content: flex-end; align-items: center;
  gap: 10px; margin-bottom: 6px; }
/* 顶栏全局搜索(0.42.6):候选浮层与 SitePicker 同族 */
.gsearch { position: relative; margin-right: auto; }
.gsearch input { width: 240px; font-size: .8rem; padding: 4px 10px;
  border: 1px solid rgba(28,25,23,.16); border-radius: 6px; }
.gs-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 320px; max-width: 420px; background: var(--panel, #fff);
  border: 1px solid var(--hair-strong, rgba(28,25,23,.2));
  border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.12);
  padding: 4px 0; max-height: 340px; overflow-y: auto; }
.gs-g { padding: 5px 12px 3px; font-size: .66rem; font-weight: 700;
  color: var(--muted); letter-spacing: .06em; }
.gs-item { padding: 5px 12px; font-size: .8rem; cursor: pointer; }
.gs-item:hover { background: rgba(245,158,11,.08); }
.gs-item .sub { margin-left: 6px; font-size: .7rem; }
.gs-empty { padding: 10px 12px; font-size: .78rem; color: var(--muted); }
.lang-sw { display: inline-flex; border: 1px solid rgba(28,25,23,.16);
           border-radius: 8px; overflow: hidden; background: #fff; }
.lang-sw button { border: 0; background: transparent; padding: 3px 12px;
                  font-size: .76rem; cursor: pointer; color: var(--muted); }
.lang-sw button.on { background: var(--accent, #D97706); color: #fff; }

/* ── 厂区多选的下拉浮层(0.40.5 实心化;0.41.0 排版打磨)─────
   ★ 必须实心:--panel 是 86% 透明 + 毛玻璃,浮在内容上直接没法看
     (需求方实测反馈「透明的看起来有问题」)。 */
.site-pop {
  position: absolute; z-index: 40; min-width: 170px; text-align: left;
  background: #fff; border: 1px solid rgba(28,25,23,.12);
  border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  font-size: .82rem; line-height: 1.4;
}
.site-pop label {
  display: block; padding: 4px 8px; border-radius: 6px;
  font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.site-pop label:hover { background: rgba(217, 119, 6, .08); }
.site-pop .sp-head {
  font-weight: 700; border-bottom: 1px solid rgba(28,25,23,.08);
  margin-bottom: 2px; padding-bottom: 6px;
}

/* ── CVE 详情弹层 ─────────────────────────────────────────────── */
/* CVE 列的可点按钮:看起来还是链接样,但行为是页内弹层不外跳 */
.cve-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit;
  color: var(--accent-strong, #B45309); text-decoration: underline;
  text-underline-offset: 2px;
}
.cve-btn:hover { color: #92400E; }
.reject-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 6px; font-size: .68rem; font-weight: 600;
  color: #57534E; background: #E7E5E4; border: 1px solid #D6D3D1;
  vertical-align: middle;
}
.cved-sec { margin-top: 14px; }
.cved-desc {
  font-size: .82rem; line-height: 1.7; color: #292524;
  white-space: pre-wrap; word-break: break-word;
}
.cved-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
  margin-top: 10px;
}
.cved-kv .k { font-size: .7rem; color: var(--muted, #78716C); }
.cved-kv .v { font-size: .84rem; font-weight: 600; margin-top: 2px; }
.cved-src summary {
  cursor: pointer; font-size: .76rem; font-weight: 600;
  color: var(--muted, #78716C);
}
.cved-src-h { font-size: .74rem; font-weight: 700; margin-top: 10px; }
.cved-src-b {
  font-size: .7rem; color: #57534E; white-space: pre-wrap;
  word-break: break-all; background: rgba(245,245,244,.7);
  border-radius: 7px; padding: 7px 10px; margin-top: 3px;
}
.fld { margin-top: 12px; }
.fld label { display: block; font-size: .78rem; font-weight: 600;
             color: #57534E; margin-bottom: 4px; }
.fld .hint { font-size: .72rem; color: var(--muted, #78716C); margin-top: 3px; }
.fld input[type=text], .fld input[type=password], .fld input[type=number],
.fld select { width: 100%; }
.fld-row { display: grid; grid-template-columns: 1fr 130px; gap: 10px; }
.caveat { background: rgba(254,243,199,.55); border-left: 3px solid #F59E0B;
  padding: 8px 12px; border-radius: 0 7px 7px 0; font-size: .77rem;
  line-height: 1.65; margin-top: 8px; }
.caveat.ro { background: rgba(231,247,239,.6); border-left-color: #10B981; }

/* ── 侧栏:可折叠分组 ─────────────────────────────────────────── */
.side-group {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  padding: 9px 14px 9px 16px; margin-top: 2px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted, #78716C); border-radius: 8px; transition: all .12s;
}
.side-group:hover { background: rgba(255, 244, 221, .5); color: var(--ink, #292524); }
.side-group.on { color: var(--accent-strong, #B45309); }
.side-group .caret { margin-left: auto; font-size: .66rem; opacity: .6; }
.side-group .gn {
  background: var(--crit, #DC2626); color: #fff; border-radius: 999px;
  font-size: .64rem; padding: 1px 7px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.side-sub { padding-left: 6px; border-left: 2px solid rgba(245,158,11,.16);
            margin-left: 20px; }
.side-sub .side-item { padding-left: 12px; font-size: .82rem; }

/* ── 漏洞优先级 ───────────────────────────────────────────────── */
.pri { display:inline-flex; align-items:center; gap:5px; border-radius:6px;
  padding:2px 9px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.pri.P0 { background:#DC2626; color:#fff; }
.pri.P1 { background:#EA580C; color:#fff; }
.pri.P2 { background:#FEF3C7; color:#92400E; }
.pri.P3 { background:#F1F0EE; color:#78716C; }
.kev-tag {
  background:#7F1D1D; color:#fff; border-radius:5px; padding:1px 7px;
  font-size:.64rem; font-weight:700; letter-spacing:.03em;
}
.ransom-tag { background:#450A0A; color:#FCA5A5; border-radius:5px;
  padding:1px 7px; font-size:.64rem; font-weight:700; }
/* 004/US1:微软 MSRC「已检测到利用」标记(与 KEV 同级醒目,但两者来源不同,
   颜色分开 —— KEV 是 CISA 的名单,这个是微软自己的判定) */
.exp-tag { background:#B91C1C; color:#fff; border-radius:5px; padding:1px 7px;
  font-size:.64rem; font-weight:700; }
/* 004/US1:KB 在 MSRC 里查无映射 —— 显式结论用灰标,不留白让人猜 */
.cve-none { display:inline-block; background:#F1F0EE; color:#78716C;
  border-radius:5px; padding:2px 8px; font-size:.7rem; }
/* 004/US2:软件清单来源徽标 */
.src-tag { display:inline-block; border-radius:4px; padding:0 5px;
  font-size:.62rem; font-weight:700; margin-left:4px; vertical-align:1px; }
.src-tag.wazuh { background:#E0F2FE; color:#075985; }
.src-tag.ocs { background:#E7F7EF; color:#08834D; }
/* 0.42.3:风险排序 —— 需强制更新的软件行淡红底,一眼定位 */
.tbl tr.row-risk td { background: rgba(220, 38, 38, .05); }
/* Wazuh agent 分组徽标:与 src-tag 同族,紫色调以便和来源标区分 */
.grp-tag { display:inline-block; border-radius:4px; padding:0 5px;
  font-size:.62rem; font-weight:700; margin-left:4px; vertical-align:1px;
  background:#EDE9FE; color:#6D28D9; }
.epss-bar { display:inline-block; width:52px; height:7px; border-radius:4px;
  background:rgba(0,0,0,.07); overflow:hidden; vertical-align:middle; }
.epss-bar i { display:block; height:100%; background:linear-gradient(90deg,#F59E0B,#DC2626); }
.fixver { font-family:var(--mono,ui-monospace,monospace); font-size:.74rem; }
.fixver b { color:#08834D; }
/* 对照条:换个排法少了多少 */
.cmp { display:flex; gap:14px; align-items:stretch; margin-bottom:14px; }
.cmp-box { flex:1; border:1px solid var(--line,#E7E2D8); border-radius:11px;
  padding:12px 15px; background:#fff; }
.cmp-box.bad { border-color:rgba(220,38,38,.3); background:rgba(254,242,242,.5); }
.cmp-box.good { border-color:rgba(16,185,129,.34); background:rgba(231,247,239,.42); }
.cmp-box .k { font-size:.74rem; color:var(--muted,#78716C); }
.cmp-box .v { font-size:1.7rem; font-weight:700; line-height:1.15; margin-top:2px; }
.cmp-arrow { display:flex; align-items:center; font-size:1.3rem;
  color:var(--muted,#78716C); }

/* ── 首页:风险总览 ───────────────────────────────────────────── */
.red-card {
  border-radius: 13px; padding: 15px 18px; margin-bottom: 12px;
  border: 1px solid rgba(220,38,38,.28);
  background: linear-gradient(180deg, rgba(254,242,242,.85), rgba(255,255,255,.95));
}
.red-card.high { border-color: rgba(234,88,12,.3);
  background: linear-gradient(180deg, rgba(255,247,237,.85), rgba(255,255,255,.95)); }
.red-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.red-head .n { font-size: 2rem; font-weight: 800; line-height: 1;
  color: #B91C1C; font-variant-numeric: tabular-nums; }
.red-card.high .red-head .n { color: #C2410C; }
.red-head .t { font-size: 1rem; font-weight: 700; }
.red-head .u { font-size: .8rem; color: var(--muted,#78716C); }
.red-sub { font-size: .82rem; color: #7F1D1D; margin-top: 3px; font-weight: 600; }
.red-why { font-size: .79rem; line-height: 1.7; margin-top: 6px;
  color: #57534E; padding-left: 10px; border-left: 2px solid rgba(220,38,38,.3); }
.red-items { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.red-item { display: flex; gap: 10px; align-items: baseline;
  font-size: .79rem; padding: 4px 9px; border-radius: 7px;
  background: rgba(255,255,255,.72); }
.red-item.hot { background: rgba(254,226,226,.75); }
.red-item .lb { font-family: var(--mono,ui-monospace,monospace);
  font-weight: 700; min-width: 128px; }
.red-item .dt { color: #57534E; flex: 1; }
.red-item .ex { font-family: var(--mono,ui-monospace,monospace);
  color: #08834D; font-size: .74rem; }
.red-more { font-size: .76rem; color: var(--muted,#78716C); margin-top: 6px; }

.cov-row { display: grid; grid-template-columns: 190px 1fr 130px;
  gap: 12px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--line,#E7E2D8); }
.cov-row:last-child { border-bottom: 0; }
.cov-bar { height: 15px; border-radius: 5px; background: rgba(0,0,0,.06);
  overflow: hidden; position: relative; }
.cov-bar i { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg,#10B981,#059669); }
.cov-bar.low i { background: linear-gradient(90deg,#DC2626,#B91C1C); }
.cov-bar.mid i { background: linear-gradient(90deg,#F59E0B,#D97706); }
.cov-num { text-align: right; font-variant-numeric: tabular-nums;
  font-size: .82rem; }
.cov-num b { font-size: 1rem; }
.ok-banner { border: 1px solid rgba(16,185,129,.34); border-radius: 12px;
  background: rgba(231,247,239,.5); padding: 16px 18px; margin-bottom: 12px; }

/* ── 首页红区:按类型分组 ─────────────────────────────────────── */
.rgrp { margin-bottom: 20px; }
.rgrp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 0 2px 8px; border-bottom: 2px solid rgba(220,38,38,.16);
  margin-bottom: 10px; }
.rgrp-head .gt { font-size: 1.02rem; font-weight: 800; }
.rgrp-head .gn { background:#DC2626; color:#fff; border-radius:999px;
  padding:1px 9px; font-size:.72rem; font-weight:700; }
.rgrp-head .gw { font-size:.76rem; color: var(--muted,#78716C); }
.rgrp-head .gw b { color:#7C2D12; }
.late-tag { background:#7F1D1D; color:#fff; border-radius:4px;
  padding:1px 6px; font-size:.66rem; font-weight:700; white-space:nowrap; }
.due-tag { color: var(--muted,#78716C); font-size:.7rem;
  font-family: var(--mono, ui-monospace, monospace); }

/* ── 分页 ─────────────────────────────────────────────────────── */
.pager { display:flex; align-items:center; gap:8px; margin-top:12px;
  flex-wrap:wrap; font-size:.8rem; }
.pager .pg { border:1px solid var(--line,#E7E2D8); background:#fff;
  border-radius:7px; padding:4px 11px; cursor:pointer; font-size:.8rem; }
.pager .pg:hover:not(:disabled) { border-color:var(--accent,#F59E0B); }
.pager .pg:disabled { opacity:.4; cursor:default; }
.pager .pg.on { background:var(--accent,#F59E0B); color:#fff;
  border-color:transparent; font-weight:700; }
.pager .info { color:var(--muted,#78716C); margin-left:auto; }

/* ── 人员画像 ─────────────────────────────────────────────────── */
.person { border:1px solid var(--line,#E7E2D8); border-radius:12px;
  background:#fff; padding:14px 17px; margin-bottom:10px; cursor:pointer;
  transition:all .12s; }
.person:hover { border-color:var(--accent,#F59E0B); }
.person.sel { border-color:var(--accent,#F59E0B);
  box-shadow:0 2px 10px rgba(245,158,11,.15); background:#FFFDF7; }
.person .nm { font-size:1rem; font-weight:700; }
.person .sam { font-family:var(--mono,ui-monospace,monospace);
  background:rgba(245,158,11,.14); color:#92400E; padding:1px 8px;
  border-radius:5px; font-size:.76rem; margin-left:8px; }
.person .meta { font-size:.79rem; color:var(--muted,#78716C); margin-top:4px; }

/* ── 工号 ↔ 设备:一人一卡,卡内一设备一行 ────────────────────────
   ★ 为什么用卡片而不是一张大扁平表 ——
     扁平表的一行是「一次(人,设备)组合」,同一个人会重复出现 N 行,
     人的身份信息(工号/姓名/部门)跟着重复 N 遍。
     结果是「这个人一共用了几台」这个最要紧的问题反而看不出来,
     得自己数行。卡片把「人」和「他的设备」这层从属关系画出来了。 */
.pcard {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  margin-bottom: 12px;
  overflow: hidden;
}
.pcard-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 11px 14px;
  background: rgba(255, 244, 221, .34);
  border-bottom: 1px solid var(--line);
}
.pcard-head .pid { display: flex; align-items: baseline; gap: 10px;
                   flex-wrap: wrap; }
/* 工号用等宽 —— 21418186 / 20901460 这类纯数字工号要能对齐着扫 */
.pcard-head .sam {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem; font-weight: 700; color: var(--accent-strong);
}
.pcard-head .pname { font-size: .92rem; font-weight: 600; }
.pcard-head .pdept { font-size: .8rem; color: var(--muted); }
.pcard-head .pmeta { display: flex; gap: 5px; flex-wrap: wrap; }
.pcard-note {
  padding: 7px 14px; font-size: .78rem; color: var(--muted);
  background: rgba(0, 0, 0, .015); border-bottom: 1px solid var(--line);
}
.pdev-wrap { padding: 10px 14px 12px; }
.pdev-title { font-size: .82rem; margin-bottom: 7px; }
.pdev-title b { color: var(--accent-strong); }
.pdev table { font-size: .8rem; }
.pdev-none {
  font-size: .82rem; padding: 10px 12px;
  border-left: 3px solid var(--line);
  background: rgba(0, 0, 0, .02);
}

/* ── 安全概览:分节结构 ────────────────────────────────────────────
   ★ 上一版整页从上到下全是红底卡片 —— 一切都紧急等于没有紧急。
     现在只有 P0 那一行的 chip 是红的,分节容器本身是中性的,
     靠标题序号和留白分层,不靠颜色喊。 */
.ov-block {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 14px 16px 16px;
  margin-bottom: 16px;
}
.ov-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ov-h h2 { margin: 0; font-size: 1rem; }
.ov-note { font-size: .8rem; margin: 4px 0 12px; line-height: 1.6; }
.ov-foot {
  margin-top: 12px; padding: 9px 11px; font-size: .77rem;
  background: rgba(0, 0, 0, .022); border-left: 3px solid var(--line);
  line-height: 1.6;
}
.ov-gap {
  margin-top: 10px; padding: 9px 11px; font-size: .8rem;
  border-left: 3px solid var(--warn, #d98324);
  background: rgba(217, 131, 36, .07);
}
.ov-gap .btn { margin-left: 8px; }

/* 覆盖面条形 —— 对数刻度,真实百分比标在右边 */
.cov-list { display: flex; flex-direction: column; gap: 9px; }
.cov-row { display: grid; grid-template-columns: 1fr 2fr auto;
           gap: 12px; align-items: center; }
.cov-name { font-size: .82rem; line-height: 1.45; }
.cov-name .muted { display: block; font-size: .73rem; }
.cov-bar { height: 9px; border-radius: 5px;
           background: rgba(0, 0, 0, .07); overflow: hidden; }
.cov-fill { height: 100%; border-radius: 5px; }
.cov-fill.ok   { background: #2f9e63; }
.cov-fill.warn { background: #d98324; }
.cov-fill.bad  { background: #c0392b; }
.cov-num { text-align: right; min-width: 96px; font-size: .82rem; }
.cov-num .muted { display: block; font-size: .72rem; }

/* 「做不到的事」三联 —— 老化 / 趋势 / 闭环率 */
.ov-caveat { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
             gap: 10px; margin-top: 12px; }
.ov-caveat .cav {
  padding: 10px 12px; font-size: .78rem; line-height: 1.6;
  border: 1px dashed var(--line); border-radius: 8px;
}
.ov-caveat .cav b { margin-right: 6px; }
.ov-caveat .cav .muted { display: block; margin-top: 5px; }
.ag-row { display: flex; gap: 14px; margin-top: 7px; }

.ov-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ov-two h3 { font-size: .85rem; margin: 0 0 8px; }
@media (max-width: 900px) { .ov-two { grid-template-columns: 1fr; } }
.cap-list { display: flex; flex-direction: column; gap: 5px; }
.cap-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.tbl tr.drill td { background: rgba(0, 0, 0, .018); font-size: .78rem; }

/* 结论摘要:一个主数 + 一条严重度带
   ★ 原先是 6 张等宽卡挤一行,每张卡里的说明文字都被压得换行,
     而且「1,872」和「10」用同样大的字号并列 —— 主次不分。 */
.sum-row { display: grid; grid-template-columns: 210px 1fr; gap: 18px;
           align-items: start; }
@media (max-width: 820px) { .sum-row { grid-template-columns: 1fr; } }
.sum-big .k { font-size: .8rem; color: var(--muted); }
.sum-big .v { font-size: 2.1rem; font-weight: 700; line-height: 1.15;
              color: var(--accent-strong); }
.sum-big .foot { font-size: .74rem; color: var(--muted); line-height: 1.55;
                 margin-top: 4px; }
.sev-strip { display: grid;
             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
             gap: 10px; padding-top: 4px; }
.sev-cell { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; }
.sev-cell .chip { align-self: flex-start; }
.sev-cell b { font-size: 1.15rem; }
.sev-cell .muted { font-size: .73rem; }

/* CIS 编号列不许换行 —— 「CIS 10」被折成两行很难看,也难扫 */
.ov-block td code { white-space: nowrap; }

/* 可下钻的摘要数字 —— 概览页上每个数字都应能点进去看构成 */
.sum-big.drill, .sev-cell.drill { cursor: pointer; border-radius: 7px;
                                  padding: 4px 7px; margin: -4px -7px;
                                  transition: background .12s; }
.sum-big.drill:hover, .sev-cell.drill:hover { background: rgba(255,244,221,.7); }
.sum-big.drill:hover .v { text-decoration: underline; }
.sev-cell.drill:hover b { text-decoration: underline; }

/* 下钻后在明细页顶部标明筛选条件 */
.drill-from {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; padding: 9px 13px;
  border-left: 3px solid var(--accent-strong);
  background: rgba(255, 244, 221, .55);
  font-size: .82rem;
}

/* 范围类发现单独一块 —— 它们不是「某台资产的问题」，
   混进逐台发现的表格会被当成同一量级的事。 */
.glob-block {
  border: 1px solid rgba(220, 38, 38, .3);
  border-left: 3px solid #B91C1C;
  border-radius: 8px;
  background: rgba(254, 242, 242, .6);
  padding: 11px 14px; margin-bottom: 14px;
}
.glob-h { font-weight: 700; font-size: .9rem; color: #7F1D1D; }
.glob-note { font-size: .78rem; color: var(--muted); margin: 4px 0 9px;
             line-height: 1.6; }
.glob-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid rgba(0, 0, 0, .06);
  cursor: pointer; font-size: .84rem;
}
.glob-row:hover b { text-decoration: underline; }
.glob-row code { font-size: .74rem; }
.glob-detail { flex-basis: 100%; font-size: .78rem; color: var(--muted);
               line-height: 1.6; }

/* 选中某个处置类别后的说明条 */
.cls-hint {
  padding: 9px 12px; margin: -4px 0 12px; font-size: .79rem;
  line-height: 1.65; border-left: 3px solid var(--accent-strong);
  background: rgba(255, 244, 221, .5);
}

/* 漏洞按处置路径分块 —— OS 补丁走 WSUS，第三方软件要逐个升级。
   两者 CVE 数量差 36 倍，但工作量方向相反：
   前者一个补丁解决数百个，后者要开数个工单。 */
.vcls { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 12px; margin-bottom: 14px; }
.vcls-box {
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); padding: 12px 14px;
}
.vcls-h { font-weight: 700; font-size: .9rem; }
.vcls-n { font-size: 1.7rem; font-weight: 700; color: var(--accent-strong);
          line-height: 1.2; }
.vcls-n span { font-size: .78rem; font-weight: 400; color: var(--muted); }
.vcls-sub { font-size: .76rem; color: var(--muted); margin-bottom: 7px; }
.vcls-act { font-size: .79rem; line-height: 1.6; }
.vcls-batch { font-size: .76rem; margin-top: 6px; padding: 5px 8px;
              border-radius: 5px; background: rgba(0, 0, 0, .03);
              color: var(--muted); }
.vcls-batch.warn { background: rgba(217, 131, 36, .1); color: #92400E; }

/* 三级钻取:链路覆盖率条 —— 先说清楚这条链能走多远 */
.chain-box { display: grid; grid-template-columns: repeat(3, 1fr);
             gap: 10px; margin-bottom: 12px; }
@media (max-width: 900px) { .chain-box { grid-template-columns: 1fr; } }
.chain-lv { border: 1px solid var(--line); border-radius: 9px;
            background: var(--panel); padding: 11px 13px; }
.chain-no { font-size: .72rem; color: var(--muted); }
.chain-lb { font-weight: 700; font-size: .9rem; }
.chain-n  { font-size: 1.5rem; font-weight: 700; color: var(--accent-strong);
            line-height: 1.25; }
.chain-note { font-size: .74rem; color: var(--muted); line-height: 1.55; }

/* 第二级:设备行，可展开 */
.dev-item { border-top: 1px solid var(--line); }
.dev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            padding: 8px 0; cursor: pointer; font-size: .83rem; }
.dev-head:hover code { color: var(--accent-strong); }
.dev-head .caret { color: var(--muted); width: 12px; }
.dev-body { padding: 4px 0 12px 20px; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 10px; }
/* 第三级:三个维度，查不到时说明缺哪个数据源 */
.l3 { border-left: 3px solid var(--line); padding: 7px 11px;
      background: rgba(0, 0, 0, .018); font-size: .8rem; line-height: 1.65; }
.l3-h { font-weight: 700; font-size: .78rem; margin-bottom: 3px; }
.l3-none { color: var(--muted); font-size: .77rem; }

/* 多源对账 */
.rec-row { padding: 11px 13px; border-radius: 8px; margin-bottom: 10px;
           background: rgba(0, 0, 0, .022); border-left: 3px solid var(--line); }
.rec-row.bad { background: rgba(254, 242, 242, .6);
               border-left-color: #B91C1C; }
.rec-h { font-weight: 700; font-size: .88rem; }
.rec-note { font-size: .79rem; color: var(--muted); margin-top: 3px;
            line-height: 1.6; }
.rec-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.rec-impact { margin-top: 8px; padding: 7px 10px; font-size: .8rem;
              background: rgba(217, 131, 36, .1); border-radius: 6px;
              color: #92400E; line-height: 1.6; }

/* 口令强度提示条。★ 只提示，不作为通过与否的依据 ——
   把提示做成硬性要求，就又回到组合规则那条老路上了。 */
.pw-bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.08);
          margin: 7px 0 3px; overflow: hidden; }
.pw-fill { height: 100%; border-radius: 3px; transition: width .15s; }
.pw-fill.lv1 { background: #c0392b; }
.pw-fill.lv2 { background: #d98324; }
.pw-fill.lv3 { background: #b8a13a; }
.pw-fill.lv4 { background: #2f9e63; }
.pw-not { font-size: .8rem; line-height: 1.65; padding: 7px 10px;
          margin-bottom: 6px; border-left: 3px solid var(--line);
          background: rgba(0,0,0,.018); }

/* ── 归属主线页 ─────────────────────────────────────────────────
   ★ 这一页的核心是「三级能一眼读出来」：部门 → 人 → 机器。
     所以每一级都要有明确的缩进与左侧竖线，不能只靠字号区分 ——
     之前的版本三级混在一起，用户看了说不出哪里体现了层级。 */
.attr-dept { border-top: 1px solid var(--line); }
.attr-dept:first-child { border-top: 0; }
.attr-dept-h { display: flex; align-items: baseline; gap: 10px;
               padding: 10px 4px; cursor: pointer; font-size: .9rem; }
.attr-dept-h:hover b { color: var(--accent-strong); }
.attr-dept-h .caret { color: var(--muted); width: 12px; font-size: .7rem; }
.attr-dept-h .muted { margin-left: auto; font-size: .78rem; }
.attr-dept-b { padding: 0 0 10px 22px; border-left: 2px solid var(--line);
               margin-left: 8px; }

.attr-p { border-top: 1px dashed var(--line); }
.attr-p:first-child { border-top: 0; }
.attr-p-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
            padding: 8px 4px; cursor: pointer; font-size: .84rem; }
.attr-p-h:hover b { color: var(--accent-strong); }
.attr-p-h .caret { color: var(--muted); width: 12px; font-size: .7rem; }
.attr-p-h .mono { font-size: .78rem; color: var(--muted); }
.attr-p-b { padding: 2px 0 10px 22px; border-left: 2px dashed var(--line);
            margin-left: 8px; }

.attr-mini { width: 100%; border-collapse: collapse; font-size: .79rem; }
.attr-mini th { text-align: left; font-weight: 600; color: var(--muted);
                font-size: .72rem; padding: 4px 8px 4px 0;
                border-bottom: 1px solid var(--line); }
.attr-mini td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.attr-mini .num, .attr-mini th.num { text-align: right; }

/* 归属率进度条。★ 只给条不给数会让人估错，两个都给。 */
.attr-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.07);
            overflow: hidden; margin-bottom: 3px; }
.attr-bar i { display: block; height: 100%; border-radius: 3px; }
.attr-bar i.ok   { background: #3f8f5f; }
.attr-bar i.warn { background: #d98324; }
.attr-bar i.bad  { background: #c0392b; }

.attr-row { cursor: pointer; }
.attr-row:hover { background: rgba(0,0,0,.025); }
.attr-row.on { background: rgba(217,131,36,.08); }

.attr-list { margin: 6px 0 0 18px; font-size: .82rem; line-height: 1.7; }
.attr-list li { margin-bottom: 4px; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input { padding: 5px 9px; font-size: .82rem; min-width: 220px;
                 border: 1px solid var(--line); border-radius: 7px;
                 background: var(--panel); color: var(--ink); }
.tile .attr-sub { font-size: .75rem; color: var(--muted); margin-top: 1px;
                  font-weight: 600; }
/* 归属单元格：名字 / 部门 / 依据三行，窄列里也能读 */
.owner-cell { font-size: .78rem; line-height: 1.4; }
.owner-cell .sub { font-size: .7rem; color: var(--muted); }
.owner-cell .chip { font-size: .64rem; margin-top: 2px; }

/* ── 数据完整性提示 ─────────────────────────────────────────────
   ★ 不用红底满屏 —— 一切都紧急等于没有紧急。
     用左侧粗竖条 + 一个感叹号图标，足够抓眼且不压过页面内容。 */
.dw { border: 1px solid #e8c9a0; border-left: 4px solid #d98324;
      background: #fdf6ec; border-radius: 10px;
      margin: 0 0 14px; overflow: hidden; }
.dw-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
        padding: 9px 13px; cursor: pointer; font-size: .84rem; }
.dw-h:hover { background: rgba(217,131,36,.06); }
.dw-icon { display: inline-flex; align-items: center; justify-content: center;
           width: 17px; height: 17px; border-radius: 50%;
           background: #d98324; color: #fff; font-weight: 700;
           font-size: .72rem; flex: none; }
.dw-sum { color: var(--ink2); font-size: .8rem; flex: 1 1 320px;
          line-height: 1.5; }
.dw-more { font-size: .76rem; color: #b06d1c; font-weight: 600;
           white-space: nowrap; }
.dw-body { padding: 2px 13px 11px; border-top: 1px solid #f0dcc2; }
.dw-item { padding: 9px 0; border-bottom: 1px dashed #ecd9bf; }
.dw-item:last-of-type { border-bottom: 0; }
.dw-item-h { display: flex; align-items: baseline; gap: 8px;
             flex-wrap: wrap; font-size: .84rem; }
.dw-item-h .mono { font-size: .75rem; }
.dw-read { font-size: .78rem; color: var(--ink2); line-height: 1.6;
           margin-top: 3px; }
.dw-err { font-size: .72rem; color: #8a3b2f; background: rgba(192,57,43,.06);
          border-radius: 6px; padding: 5px 8px; margin-top: 5px;
          word-break: break-all; line-height: 1.5; }
.dw-foot { font-size: .76rem; color: var(--muted); padding-top: 8px;
           line-height: 1.6; }

/* ── 数据完整性页 ───────────────────────────────────────────── */
.cp-head.unreliable { border-left: 4px solid #c0392b; }
.cp-head.partial    { border-left: 4px solid #d98324; }
.cp-head.complete   { border-left: 4px solid #3f8f5f; }

.cp-row { display: grid; grid-template-columns: 1.1fr .9fr 1.6fr;
          gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.cp-row:first-of-type { border-top: 0; }
.cp-name { font-size: .88rem; display: flex; align-items: baseline; gap: 8px;
           flex-wrap: wrap; }
.cp-name .mono { font-size: .75rem; }
.cp-gives { font-size: .75rem; color: var(--muted); margin-top: 3px;
            line-height: 1.5; }
.cp-when { font-size: .76rem; color: var(--ink2); margin-top: 4px; }
.cp-read { font-size: .78rem; color: var(--ink2); line-height: 1.6;
           margin-bottom: 3px; }
.cp-err { font-size: .72rem; color: #8a3b2f; background: rgba(192,57,43,.06);
          border-radius: 6px; padding: 5px 8px; margin-top: 4px;
          word-break: break-all; line-height: 1.5; }
@media (max-width: 1100px) {
  .cp-row { grid-template-columns: 1fr; gap: 6px; }
}

/* 人员卡片头改成可点折叠 */
.pcard-head.clickme { cursor: pointer; display: flex; align-items: center;
                      gap: 10px; flex-wrap: wrap; }
.pcard-head.clickme:hover .pname { color: var(--accent-strong); }
.pcard-head.clickme .caret { color: var(--muted); width: 12px;
                             font-size: .7rem; flex: none; }
.pcard-head.clickme .pmeta { margin-left: auto; }

/* ── 全局数据状态条 ─────────────────────────────────────────────
   放在 main 最上方，每一页都有。每页各自的 DataWarning 只说本页
   依赖的源；这一条说的是全站：不管你在看哪一页，这些源都影响你
   看到的数字。所以它必须常驻，而不是收进某一页。 */
.gbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        padding: 8px 14px; margin: 0 0 14px; border-radius: 10px;
        font-size: .81rem; line-height: 1.5;
        border: 1px solid #e8c9a0; border-left: 4px solid #d98324;
        background: #fdf6ec; }
.gbar.unreliable { border-color: #e8b4ac; border-left-color: #c0392b;
                   background: #fdf1ef; }
.gbar-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
            background: #d98324; box-shadow: 0 0 0 3px rgba(217,131,36,.18);
            animation: gpulse 2.2s ease-in-out infinite; }
.gbar.unreliable .gbar-dot { background: #c0392b;
                             box-shadow: 0 0 0 3px rgba(192,57,43,.16); }
@keyframes gpulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) {
  .gbar-dot { animation: none; }
}
.gbar-list { display: flex; gap: 14px; flex-wrap: wrap; }
.gbar-item code { font-size: .74rem; }
.gbar-item em { font-style: normal; color: #a8341f; font-weight: 600;
                margin-left: 4px; }
.gbar-item i { font-style: normal; color: var(--muted); margin-left: 6px;
               font-size: .76rem; }
.gbar-note { color: var(--muted); font-size: .77rem; }
.gbar-go { margin-left: auto; border: 1px solid #d9a86a; background: #fff;
           color: #a2660f; border-radius: 7px; padding: 3px 11px;
           font-size: .78rem; cursor: pointer; white-space: nowrap; }
.gbar-go:hover { background: #fff8ef; }