/* 管理后台 A（概览 / 验证台 / 工具目录 / 能力 cap）。类名一律 .ca- 前缀；尺寸与色值只用 tokens.css 的变量。 */

.ca-page { max-width: calc(var(--content-w) + var(--content-pad) * 2); }
.ca-r { text-align: right; }
.ca-mr { margin-right: 6px; }
.ca-dim { color: var(--ink-24); }   /* 注意别用 base.css 的 .t-24：那个类同时是 24px 字号 */
.ca-nw { white-space: nowrap; }
.ca-sub { display: block; font-family: var(--font); font-size: 11px; line-height: 15px; color: var(--ink-40); }
.ca-code { font-family: var(--mono); font-size: 12px; background: var(--ink-06); color: var(--ink-80); padding: 1px 6px; border-radius: var(--r-4); }
/* 选中态是黑底，把里面的计数胶囊翻成半透明白（只在本页范围内改，不动 base.css 的组件） */
.ca-page .tabs-pill button.is-on .count, .ca-page .chip.is-on .count { background: rgba(255, 255, 255, .2); color: #fff; }
/* 代码块右上角有「复制」钮：留出位置 + 折行，长命令 / 长 JSON 都不会钻到钮底下 */
.ca-page .codeblock { padding-right: 58px; }
.ca-page .codeblock pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 状态胶囊：三态（通过 / 不符 / 未跑），验证台与目录共用 */
.ca-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 500; background: var(--ink-06); color: var(--ink-60); }
.ca-badge.is-ok { background: var(--green-bg); color: var(--green); }
.ca-badge.is-bad { background: var(--red-bg); color: var(--red); }
.ca-badge.is-warn { background: var(--amber-bg); color: var(--amber); }
.ca-badge.is-run { background: var(--brand-bg); color: var(--brand); }

.ca-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 500; color: var(--ink-40); white-space: nowrap; }
.ca-state.is-pass { color: var(--green); }
.ca-state.is-fail { color: var(--red); }
.ca-state.is-off { color: var(--amber); }
.ca-state.is-run { color: var(--brand); }

/* ---------------- 概览 ---------------- */
.ca-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.ca-kpi { position: relative; display: block; padding: 20px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-20); color: var(--ink); transition: border-color var(--t), box-shadow var(--t); }
.ca-kpi:hover { border-color: var(--ink-24); box-shadow: 0 8px 24px rgba(20, 21, 28, .06); color: var(--ink); }
.ca-kpi-ic { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.ca-kpi-v { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.5px; }
.ca-kpi-v small { font-size: var(--fs-12); font-weight: 400; color: var(--ink-40); margin-left: 3px; }
.ca-kpi-k { font-size: var(--fs); color: var(--ink-80); margin-top: 2px; }
.ca-kpi-s { font-size: var(--fs-12); line-height: 18px; color: var(--ink-40); margin-top: 6px; }

.ca-cols { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: var(--grid-gap); align-items: start; }
.ca-main, .ca-side { display: flex; flex-direction: column; gap: var(--grid-gap); min-width: 0; }

.ca-glist { border: 1px solid var(--line-2); border-radius: var(--r-12); overflow: hidden; }
.ca-grow { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line-2); }
.ca-grow:last-child { border-bottom: 0; }
.ca-grow:hover { background: var(--ink-04); }
.ca-gid { font-family: var(--mono); font-size: var(--fs-12); font-weight: 600; color: var(--ink-60); background: var(--ink-06); border-radius: var(--r-4); padding: 2px 6px; flex: none; }
.ca-gtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-80); }
.ca-gn { flex: none; }
.ca-gok { display: inline-flex; align-items: center; gap: 4px; width: 62px; flex: none; font-size: var(--fs-12); font-weight: 500; color: var(--ink-24); }
.ca-gok .ic { font-size: 13px; }
.ca-gok.is-ok { color: var(--green); }
.ca-gok.is-bad { color: var(--red); }

.ca-sec { display: inline-flex; align-items: baseline; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--ink-06); color: var(--ink-60); font-size: var(--fs-12); }
.ca-sec b { font-size: var(--fs); font-weight: 600; color: var(--ink); }

.ca-plist li { border-top: 1px solid var(--line-2); }
.ca-plist li:first-child { border-top: 0; }
.ca-plist a { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; color: var(--ink-80); font-size: 13px; line-height: 19px; }
.ca-plist a:hover { color: var(--ink); }
.ca-plist a:hover .ca-rid { background: var(--red); color: #fff; }
.ca-rid { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--red); background: var(--red-bg); border-radius: var(--r-4); padding: 1px 5px; margin-top: 1px; }
.ca-plist .grow { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.ca-lgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ca-layer { display: block; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-12); color: var(--ink-80); transition: border-color var(--t), background var(--t); }
.ca-layer:hover { border-color: var(--ink-24); background: var(--ink-04); color: var(--ink-80); }
.ca-layer.is-here { border-color: var(--brand); background: var(--brand-bg); }
.ca-layer b { display: block; margin-top: 8px; font-weight: 600; font-size: var(--fs); color: var(--ink); }
.ca-layer i { display: block; margin-top: 2px; font-style: normal; font-size: var(--fs-12); color: var(--ink-40); }
.ca-layer em { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-style: normal; font-size: 11px; line-height: 16px; color: var(--ink-60); }
.ca-ln { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-12); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

.ca-hub .kv { font-size: 13px; }

/* ---------------- 验证台 ---------------- */
.ca-env { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-60); font-size: var(--fs-12); white-space: nowrap; flex: none; }
.ca-page .page-hd > div:first-child { max-width: 880px; }
.ca-page .page-hd > .row { flex: none; }
.ca-env .ic { font-size: 14px; }

.ca-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--bg-2); }
.ca-bar-l { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ca-sum { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--ink-40); }
.ca-sum b { font-size: var(--fs-16); font-weight: 600; color: var(--ink); }
.ca-sum.is-ok { color: var(--green); }
.ca-sum.is-bad { color: var(--red); }
.ca-sum.is-warn { color: var(--amber); }

.ca-bench td { vertical-align: top; padding: 11px 12px; height: auto; line-height: 18px; }
.ca-bench th { padding: 0 12px; }
.ca-bench tbody tr.is-open td { background: var(--brand-bg); }
.ca-bench .ca-tag { display: inline-block; margin-top: 4px; margin-right: 4px; font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: var(--r-pill); background: var(--ink-06); color: var(--ink-60); }
.ca-bench .ca-tag.is-dim { background: transparent; border: 1px solid var(--line); color: var(--ink-24); }
.ca-req { font-size: 12px; overflow-wrap: anywhere; }
.ca-req em, .ca-act em { display: block; margin-top: 4px; font-style: normal; font-family: var(--font); font-size: 11px; line-height: 16px; color: var(--amber); }
.ca-exp { font-size: 12px; line-height: 18px; }
.ca-act { font-size: 12px; overflow-wrap: anywhere; color: var(--ink-80); }
.ca-evrow td { background: var(--bg-2); padding: 16px; }
.ca-bench tbody tr.ca-evrow:hover td { background: var(--bg-2); }
.ca-ev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ca-ev-l, .ca-ev-r { min-width: 0; }
.ca-ev .codeblock { max-height: 260px; }
.ca-asserts li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; line-height: 19px; color: var(--ink-80); }
.ca-asserts li .ic { font-size: 14px; margin-top: 3px; flex: none; }
.ca-asserts li.is-ok .ic { color: var(--green); }
.ca-asserts li.is-bad { color: var(--red); }

.ca-key .ca-keyrow { display: flex; align-items: center; gap: 8px; }
.ca-input { flex: 1; min-width: 0; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); outline: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 2px; }
.ca-input:focus { border-color: var(--brand); }

/* ---------------- 工具目录 ---------------- */
.ca-cat td { vertical-align: top; padding-top: 11px; padding-bottom: 11px; height: auto; line-height: 20px; }
.ca-cat tbody tr.is-hidden td { background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(20, 21, 28, .022) 7px, rgba(20, 21, 28, .022) 14px); }
.ca-cat tbody tr.is-click { cursor: pointer; }
.ca-cap { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--ink-06); color: var(--ink-60); font-size: var(--fs-12); white-space: nowrap; }
.ca-hint { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ink-12); font-size: 14px; }
.ca-hint.is-on { background: var(--brand-bg); color: var(--brand); }
.ca-req-y { color: var(--red); font-weight: 500; }
.ca-params li { padding: 12px 0; border-top: 1px solid var(--line-2); }
.ca-params li:first-child { border-top: 0; }
.ca-params code { background: var(--ink-06); font-size: 13px; padding: 2px 7px; border-radius: var(--r-4); }
.ca-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: var(--fs-12); line-height: 20px; color: var(--ink-40); }
.ca-legend span { display: flex; align-items: flex-start; gap: 8px; }
.ca-legend .dot { margin-top: 6px; flex: none; }
.ca-legend .tag { flex: none; }

/* ---------------- 能力 cap ---------------- */
.ca-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ca-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px 14px; border: 1px dashed var(--line-3); border-radius: var(--r-12); background: var(--bg-2); }
.ca-step b { grid-column: 2; font-weight: 600; font-size: var(--fs); color: var(--ink); }
.ca-step i { grid-column: 2; font-style: normal; font-size: 11px; line-height: 15px; color: var(--ink-40); }
.ca-step .ca-ln { grid-row: span 2; background: var(--ink-06); color: var(--ink-60); }

.ca-cap-card { padding: 0; overflow: hidden; }
.ca-cap-hd { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line-2); }
.ca-cap-ic { width: 44px; height: 44px; border-radius: var(--r-12); background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
.ca-five { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ca-item { padding: 20px 24px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); min-width: 0; }
.ca-item:nth-child(2n) { border-right: 0; }
.ca-item:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
.ca-item-hd { display: flex; align-items: center; gap: 8px; font-size: var(--fs-16); font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.ca-item-bd { font-size: var(--fs); color: var(--ink-80); }
.ca-item-bd .kv { font-size: 13px; }
.ca-url { font-family: var(--mono); font-size: 13px; background: var(--ink-06); padding: 3px 8px; border-radius: var(--r-4); word-break: break-all; }

.ca-bars { display: flex; gap: 4px; margin-bottom: 12px; }
.ca-bar-seg { height: 30px; border-radius: var(--r-8); background: var(--ink-06); color: var(--ink-60); font-size: var(--fs-12); font-weight: 500; display: flex; align-items: center; justify-content: center; min-width: 56px; }
.ca-bar-seg.is-on { background: var(--green-bg); color: var(--green); }
.ca-hidden li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line-2); font-size: 13px; line-height: 19px; }
.ca-hidden li:first-child { border-top: 0; }
.ca-hidden code { flex: none; background: var(--ink-06); font-size: 12px; }

.ca-inject { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ca-inject > .ic { color: var(--ink-24); font-size: 16px; }
.ca-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); font-size: var(--fs-12); color: var(--ink-60); }
.ca-pill code { background: none; padding: 0; font-size: 12px; color: var(--ink-80); }
.ca-pill.is-key { border-color: var(--brand); background: var(--brand-bg); color: var(--brand); }
.ca-pill.is-key code { color: var(--brand); }

.ca-task { background: var(--bg-2); border-style: dashed; }

/* 窄屏回落（后台以 1440 为准，这里只保证不横向溢出） */
@media (max-width: 1280px) {
  .ca-cols { grid-template-columns: minmax(0, 1fr); }
  .ca-side { flex-direction: row; flex-wrap: wrap; }
  .ca-side > .panel { flex: 1 1 320px; }
  .ca-kpis { grid-template-columns: repeat(2, 1fr); }
  .ca-steps { grid-template-columns: repeat(2, 1fr); }
  .ca-five { grid-template-columns: minmax(0, 1fr); }
  .ca-item { border-right: 0; }
}