/* ============================================================
   AI Security Agent Lab · U1-01 Full Mode UI Skeleton
   ------------------------------------------------------------
   布局（Full Mode：摊开安全链，不做简洁 Dashboard）：
       Header
       Sidebar | Main Workspace
       Bottom Security Timeline
   ------------------------------------------------------------
   本文件只负责展示层样式，不含任何安全逻辑。
   ============================================================ */

:root {

    --bg: #0b0f14;

    --bg-panel: #121820;

    --bg-elevated: #161e28;

    --border: #223040;

    --border-strong: #2d4257;

    --text: #d7e2ee;

    --text-dim: #8ba0b6;

    --text-faint: #7a8ea4;

    --accent: #3ea0ff;

    --accent-dim: #1d4f7d;

    --ok: #3ddc97;

    --warn: #ffb454;

    --muted: #74889d;

    --mono: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;

}


* {

    box-sizing: border-box;

}


html,
body {

    height: 100%;

    margin: 0;

}


body {

    background: var(--bg);

    color: var(--text);

    font-family: var(--mono);

    font-size: 13px;

    line-height: 1.5;

    display: grid;

    grid-template-columns: 248px 1fr;

    grid-template-rows: auto 1fr auto;

    grid-template-areas:
        "header header"
        "sidebar workspace"
        "timeline timeline";

    overflow: hidden;

}


/* ============================================================
   Header
   ============================================================ */

.app-header {

    grid-area: header;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 10px 16px;

    background: var(--bg-panel);

    border-bottom: 1px solid var(--border-strong);

}


.app-header__title {

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.04em;

}


.app-header__subtitle {

    font-size: 11px;

    color: var(--text-dim);

}


.app-header__badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.badge {

    padding: 3px 8px;

    font-size: 11px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    color: var(--text-dim);

    white-space: nowrap;

}


.badge--pending {

    color: var(--warn);

    border-color: #6b5320;

    background: #2a2213;

}


/* ============================================================
   Sidebar
   ============================================================ */

.app-sidebar {

    grid-area: sidebar;

    background: var(--bg-panel);

    border-right: 1px solid var(--border);

    overflow-y: auto;

    padding: 12px 10px;

}


.sidebar__section {

    margin-bottom: 14px;

}


.sidebar__label {

    font-size: 10px;

    letter-spacing: 0.12em;

    color: var(--text-faint);

    /* P2-UX-17：分组标题之间的轻微视觉分隔 */
    margin-top: 16px;

    padding: 0 6px 6px;

}


.sidebar__item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    width: 100%;

    padding: 8px 10px;

    margin-bottom: 4px;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 3px;

    color: var(--text);

    font-family: var(--mono);

    font-size: 12px;

    text-align: left;

    cursor: pointer;

}


.sidebar__item:hover {

    background: var(--bg-elevated);

    border-color: var(--border);

}


.sidebar__item.is-active {

    background: #10263c;

    border-color: var(--accent-dim);

    color: #ffffff;

}


.sidebar__item.is-disabled {

    color: var(--text-faint);

    cursor: not-allowed;

}


.sidebar__item.is-disabled:hover {

    background: transparent;

    border-color: transparent;

}


.sidebar__name {

    flex: 1;

}


/* ============================================================
   Main Workspace
   ============================================================ */

.app-workspace {

    grid-area: workspace;

    overflow-y: auto;

    padding: 16px;

}


.workspace__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    border-bottom: 1px solid var(--border);

    padding-bottom: 10px;

    margin-bottom: 14px;

}


.workspace__title {

    font-size: 14px;

    font-weight: 700;

}


.workspace__path {

    font-size: 11px;

    color: var(--text-faint);

}


.notice {

    border: 1px dashed var(--border-strong);

    border-radius: 3px;

    padding: 10px 12px;

    margin-bottom: 14px;

    color: var(--text-dim);

    font-size: 11px;

    background: #0e141c;

}


.notice__title {

    color: var(--warn);

    font-size: 11px;

    letter-spacing: 0.06em;

    margin-bottom: 4px;

}


.panel-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 12px;

}


.panel {

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    min-height: 168px;

    display: flex;

    flex-direction: column;

}


.panel__head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding: 8px 12px;

    border-bottom: 1px solid var(--border);

    font-size: 11px;

    letter-spacing: 0.06em;

}


.panel__owner {

    color: var(--text-faint);

    font-size: 10px;

}


.panel__body {

    padding: 12px;

    flex: 1;

    font-size: 12px;

    color: var(--text-faint);

}


.field-row {

    display: flex;

    gap: 10px;

    padding: 3px 0;

    border-bottom: 1px dotted #26323f;

}


.field-row__key {

    color: var(--text-faint);

    min-width: 148px;

}


.field-row__value {

    color: var(--text-dim);

}


.field-row__value.is-empty {

    color: var(--muted);

    font-style: italic;

}


/* ============================================================
   Bottom Security Timeline
   ============================================================ */

.app-timeline {

    grid-area: timeline;

    background: var(--bg-panel);

    border-top: 1px solid var(--border-strong);

    padding: 8px 12px 10px;

    max-height: 168px;

    overflow-y: auto;

}


.timeline__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;

}


.timeline__title {

    font-size: 11px;

    letter-spacing: 0.12em;

    color: var(--text-dim);

}


.timeline__hint {

    font-size: 10px;

    color: var(--text-faint);

}


.timeline__track {

    display: flex;

    align-items: stretch;

    gap: 0;

    overflow-x: auto;

    padding-bottom: 4px;

}


.timeline__step {

    min-width: 148px;

    max-width: 148px;

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 6px 8px;

    background: var(--bg-elevated);

}


.timeline__step-name {

    font-size: 11px;

    color: var(--text);

    margin-bottom: 4px;

}


.timeline__step-owner {

    font-size: 10px;

    color: var(--text-faint);

    margin-bottom: 4px;

}


.timeline__step-status {

    font-size: 10px;

    color: var(--muted);

}


.timeline__arrow {

    align-self: center;

    color: var(--text-faint);

    padding: 0 6px;

    font-size: 11px;

}


/* ============================================================
   U1-02-S3 · Data Source 状态 / 数据态样式
   ============================================================ */

/* ---- Header：连接状态 badge ---- */

.badge--connected {

    color: var(--ok);

    border-color: #1f6b4d;

    background: #0f2a20;

}


.badge--error {

    color: #ff7b72;

    border-color: #7d2b2b;

    background: #2a1414;

}


/* ---- V7 未定义字段（不冒充、不当作空值）---- */

.field-row__value.is-undefined {

    color: var(--warn);

    font-style: italic;

}


/* ---- 字段下方的说明行 ---- */

.field-note {

    margin-top: 8px;

    padding-top: 6px;

    border-top: 1px dotted #1b2735;

    color: var(--text-faint);

    font-size: 11px;

    line-height: 1.6;

}


/* ---- Loading / Empty / Error 区块 ---- */

.state-block {

    border: 1px solid var(--border);

    border-left: 3px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-panel);

    padding: 14px 16px;

}


.state-block__title {

    font-size: 12px;

    letter-spacing: 0.06em;

    margin-bottom: 8px;

    color: var(--text);

}


.state-block__line {

    color: var(--text-faint);

    font-size: 11px;

    line-height: 1.7;

}


.state-block--loading {

    border-left-color: var(--accent);

}


.state-block--loading .state-block__title {

    color: var(--accent);

}


.state-block--empty {

    border-left-color: var(--muted);

}


.state-block--empty .state-block__title {

    color: var(--text-dim);

}


.state-block--error {

    border-left-color: #ff7b72;

}


.state-block--error .state-block__title {

    color: #ff7b72;

}


/* ---- Assessment 选择器（只读切换）---- */

.selector {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 12px;

}


.selector__label {

    font-size: 10px;

    letter-spacing: 0.12em;

    color: var(--text-faint);

    margin-right: 4px;

}


.selector__chip {

    padding: 4px 10px;

    background: var(--bg-elevated);

    border: 1px solid var(--border);

    border-radius: 3px;

    color: var(--text-dim);

    font-family: var(--mono);

    font-size: 11px;

    cursor: pointer;

}


.selector__chip:hover {

    border-color: var(--border-strong);

    color: var(--text);

}


.selector__chip.is-active {

    background: #10263c;

    border-color: var(--accent-dim);

    color: #ffffff;

}


/* ============================================================
   U1-03-S2 · Assessment Lifecycle Visualization
   ------------------------------------------------------------
   布局说明：状态节点采用中性格网（auto-fit），
   位置不代表转移关系 —— 边只以节点内的 → 标签与
   TRANSITION GRAPH 呈现，避免用视觉位置暗示不存在的 transition。
   ============================================================ */

.lifecycle {

    margin-top: 12px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 12px 14px 14px;

}


.lifecycle__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    border-bottom: 1px solid var(--border);

    padding-bottom: 8px;

    margin-bottom: 10px;

}


.lifecycle__title {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

}


.lifecycle__owner {

    font-size: 10px;

    color: var(--text-faint);

}


/* ---- 摘要 ---- */

.lifecycle__facts {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 10px;

}


.lifecycle__fact-key {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

    margin-bottom: 2px;

}


.lifecycle__fact-value {

    font-size: 12px;

    color: var(--text);

}


.lifecycle__fact-value.is-current {

    color: var(--accent);

    font-weight: 700;

}


/* ---- 图例 ---- */

.lifecycle__legend {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    padding: 6px 0 10px;

    border-bottom: 1px dotted #1b2735;

    margin-bottom: 12px;

}


.lifecycle__legend-item {

    display: flex;

    align-items: center;

    gap: 6px;

}


.lifecycle__legend-text {

    font-size: 10px;

    color: var(--text-faint);

}


.node-badge {

    padding: 1px 6px;

    font-size: 9px;

    letter-spacing: 0.06em;

    border: 1px solid var(--border-strong);

    border-radius: 2px;

    color: var(--text-dim);

    white-space: nowrap;

}


.node-badge--current {

    color: #ffffff;

    border-color: var(--accent);

    background: #123a5e;

}


.node-badge--next {

    color: var(--ok);

    border-color: #1f6b4d;

    background: #0f2a20;

}


.node-badge--terminal {

    color: var(--muted);

    border-color: var(--border);

    background: transparent;

}


/* ---- 状态节点（中性格网，位置不代表边）---- */

.state-node-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));

    gap: 10px;

    margin-bottom: 12px;

}


.state-node {

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 8px 10px;

}


.state-node.is-current {

    border-color: var(--accent);

    box-shadow: inset 0 0 0 1px rgba(62, 160, 255, 0.35);

}


.state-node.is-next {

    border-color: #1f6b4d;

}


.state-node__head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 6px;

}


.state-node__name {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;

}


.state-node__badges {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

}


.state-node__edges {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

}


.edge-chip {

    font-size: 10px;

    color: var(--text-dim);

    border: 1px solid var(--border);

    border-radius: 2px;

    padding: 1px 6px;

}


.state-node__terminal,
.state-node__undefined {

    font-size: 10px;

    color: var(--muted);

    font-style: italic;

}


.state-node__undefined {

    color: var(--warn);

}


/* ---- 完整转换图（逐条边）---- */

.lifecycle__graph {

    border-top: 1px dotted #1b2735;

    padding-top: 10px;

}


.lifecycle__graph-title {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

    margin-bottom: 6px;

}


.graph-row {

    display: flex;

    align-items: baseline;

    gap: 8px;

    padding: 2px 0;

}


.graph-row__from {

    min-width: 168px;

    font-size: 11px;

    color: var(--text);

}


.graph-row__arrow {

    color: var(--text-faint);

    font-size: 11px;

}


.graph-row__to {

    font-size: 11px;

    color: var(--text-dim);

}


.lifecycle__note {

    margin-top: 10px;

    padding-top: 8px;

    border-top: 1px dotted #1b2735;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ============================================================
   U1-04-S2 · Security Object Graph
   ------------------------------------------------------------
   对象节点采用中性格网：位置不代表依赖或执行顺序，
   真实情况只看每个节点的 STATE 与 COUNT。
   ============================================================ */

.objgraph {

    margin-top: 12px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 12px 14px 14px;

}


.objgraph__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    border-bottom: 1px solid var(--border);

    padding-bottom: 8px;

    margin-bottom: 10px;

}


.objgraph__title {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

}


.objgraph__owner {

    font-size: 10px;

    color: var(--text-faint);

}


/* ---- Summary ---- */

.objgraph__summary {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-bottom: 12px;

}


.objgraph__summary-key {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

    margin-bottom: 2px;

}


.objgraph__summary-value {

    font-size: 15px;

    font-weight: 700;

    color: var(--text);

}


/* ---- U4-04-B：Graph 分组标题（INSTANCE GRAPH / MODEL GRAPH）---- */

.objgraph__group {

    margin-bottom: 8px;

}


.objgraph__group-title {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: var(--text);

}


.objgraph__group-note {

    margin-top: 3px;

    font-size: 11px;

    color: var(--text-faint);

}


/* ---- U4-05：Backend Boundary Declarations ---- */

.objgraph__boundary {

    margin-bottom: 12px;

    padding: 8px 10px;

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-elevated);

}


.objgraph__boundary-title {

    font-size: 10px;

    letter-spacing: 0.06em;

    color: var(--text-dim);

    margin-bottom: 4px;

}


.objgraph__boundary-line {

    font-size: 11px;

    color: var(--text-faint);

    font-family: var(--mono);

    line-height: 1.6;

}


/* ---- U4-05：INSTANCE / MODEL 视图切换（纯视图过滤）---- */

.objgraph__viewbar {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 12px;

}


.objgraph__viewbar-label {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

    margin-right: 4px;

}


.objgraph__viewbtn {

    font-family: inherit;

    font-size: 10px;

    letter-spacing: 0.06em;

    padding: 3px 9px;

    color: var(--text-dim);

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 2px;

    cursor: pointer;

}


.objgraph__viewbtn.is-active {

    color: var(--text);

    border-color: var(--accent-dim);

    background: #10233a;

}


/* ---- U4-05：Object Type 视觉区分（不改变语义）---- */

.obj-type {

    padding: 1px 6px;

    font-size: 9px;

    letter-spacing: 0.06em;

    border: 1px solid var(--border-strong);

    border-radius: 2px;

    white-space: nowrap;

    color: var(--text-dim);

}


.obj-type--domain {

    color: var(--accent);

    border-color: var(--accent-dim);

}


.obj-type--runtime {

    color: var(--warn);

}


.obj-type--configuration {

    color: var(--text-dim);

}


.obj-type--derived {

    color: var(--muted);

}


.obj-type--event {

    color: var(--text-faint);

}


/* ---- U4-05：Edge 只读选择 ---- */

.obj-edge--clickable {

    cursor: pointer;

}


.obj-edge--clickable:hover {

    background: #101923;

}


.obj-edge.is-selected {

    background: #10233a;

    box-shadow: inset 2px 0 0 var(--accent);

}


.obj-edge__kind {

    color: var(--text-faint);

}


/* ---- U4-06-A：Inspector 分层（WHAT / WHY / PROOF）与只读折叠区 ---- */

.obj-detail__layer {

    margin-top: 3px;

    font-size: 10px;

    letter-spacing: 0.06em;

    color: var(--accent);

}


.obj-detail__kind {

    margin-bottom: 10px;

    padding: 4px 8px;

    font-size: 10px;

    letter-spacing: 0.06em;

    border: 1px solid var(--border-strong);

    border-radius: 2px;

    color: var(--text-dim);

}


.obj-detail__kind.is-created {

    color: var(--ok);

    border-color: #1f6b4d;

    background: #0f2a20;

}


.obj-detail__kind.is-pending {

    color: var(--muted);

    border-color: var(--border);

}


.obj-raw {

    margin-top: 6px;

    font-family: var(--mono);

    font-size: 10px;

}


.obj-raw__summary {

    cursor: pointer;

    color: var(--text-faint);

    letter-spacing: 0.06em;

}


.obj-raw__body {

    margin-top: 5px;

    padding: 6px 8px;

    color: var(--text-dim);

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: 2px;

    word-break: break-all;

    white-space: pre-wrap;

}


/* ---- P2-UX-01 · 让人话结论 → 事实 → 技术详情 层级成立 ---- */

.obj-detail__group-title.is-strong {

    font-size: 11px;

    color: var(--text-dim);

    letter-spacing: 0.08em;

}


.obj-detail__subgroup {

    margin-top: 8px;

    padding-top: 6px;

    padding-bottom: 2px;

    border-top: 1px dotted #1b2735;

}


.obj-detail__row-main {

    display: block;

    padding: 1px 0;

}


.obj-detail__row-title {

    font-size: 11px;

    line-height: 1.6;

    color: var(--text);

}


.obj-detail__row-sub {

    margin-top: 1px;

    font-size: 9px;

    letter-spacing: 0.05em;

    color: var(--text-faint);

}


/* 授权结果 hero（Z1） */

.obj-detail__result {

    margin-top: 6px;

    padding: 10px 12px;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 0.04em;

    color: var(--text);

    background: #0f1a26;

    border: 1px solid var(--border-strong);

    border-left: 3px solid var(--accent);

    border-radius: 3px;

}


/* ------------------------------------------------------------
   P3-03 Step 2 · Authorization 13 项检查清单（轻量视觉）
   只改“怎么显示”，不改数据 / 不改 Step 1 顺序 / 不新增判断。
   ------------------------------------------------------------ */

/* 清单行：固定序号徽标 + 状态符号 + 标题，三等份垂直对齐 */
.obj-check {

    display: flex;

    align-items: baseline;

    gap: 8px;

}


/* 固定序号 01–13 徽标：等宽数字、固定宽度、轻量边框 */
.obj-check__seq {

    flex: 0 0 auto;

    min-width: 24px;

    padding: 1px 5px;

    font-family: var(--mono);

    font-size: 9px;

    text-align: center;

    letter-spacing: 0.05em;

    color: var(--text-dim);

    background: #0f1a26;

    border: 1px solid var(--border-strong);

    border-radius: 2px;

}


/* 状态符号 ✓ / ✗ / —：去掉，宽度固定，靠颜色区分 */
.obj-check__mark {

    flex: 0 0 auto;

    width: 12px;

    font-family: var(--mono);

    font-size: 11px;

    line-height: 1.6;

    text-align: center;

}


.obj-check__mark.is-pass    { color: var(--ok); }

.obj-check__mark.is-fail    { color: #ff7b72; }

.obj-check__mark.is-pending { color: var(--muted); }


/* 人话标题：沿用原 row-title 的排版 */
.obj-check__title {

    flex: 1 1 auto;

    font-size: 11px;

    line-height: 1.6;

    color: var(--text);

}


/* Step 3 · 教学说明（Why）：一句话、弱化、无边框，只做辅助解释 */
.obj-check__why {

    margin-top: 1px;

    font-size: 10px;

    line-height: 1.6;

    color: var(--muted);

    padding-left: 32px;

}


/* 阻断点位置提示（仅流程在此停止的位置标记，不新增判定） */
.obj-check__block-tag {

    margin-left: 8px;

    padding: 0 5px;

    font-size: 9px;

    letter-spacing: 0.06em;

    color: #ff7b72;

    border: 1px solid #7d2b2b;

    border-radius: 2px;

}


/* 失败项（passed === false）：轻微强调，可快速定位阻断点，但不过度 */
.obj-detail__subgroup.is-fail {

    background: #1a1212;

    border-top-color: #4d2b2b;

    border-left: 2px solid #ff7b72;

    padding-left: 8px;

}


/* 未执行项：中性弱化，绝不带失败红 */
.obj-detail__subgroup.is-pending .obj-check__seq {

    color: var(--text-faint);

}


/* 页间导航按钮（纯 UI：复用既有 selectModule） */

.obj-detail__nav-btn {

    margin-top: 10px;

    padding: 6px 12px;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: 0.06em;

    color: var(--accent);

    background: #0f1a26;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    cursor: pointer;

}


.obj-detail__nav-btn:hover {

    border-color: var(--accent);

    background: #13222f;

}


.obj-nav {

    font-family: var(--mono);

    font-size: 11px;

    padding: 1px 6px;

    color: var(--accent);

    background: transparent;

    border: 1px solid var(--accent-dim);

    border-radius: 2px;

    cursor: pointer;

}


.obj-nav:hover {

    background: #10233a;

}


/* ---- U4-06-B：Relationship Trace（1-hop 只读导航）---- */

.obj-trace__toggle {

    margin-top: 4px;

    font-family: inherit;

    font-size: 9px;

    letter-spacing: 0.06em;

    padding: 2px 8px;

    color: var(--text-dim);

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 2px;

    cursor: pointer;

}


.obj-trace__row {

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 8px;

    padding: 3px 0;

    border-bottom: 1px dotted #26323f;

}


.obj-trace__row.is-selected {

    background: #10233a;

}


.obj-trace__arrow {

    color: var(--text-faint);

    font-size: 10px;

    min-width: 26px;

}


.obj-trace__neighbor {

    font-family: var(--mono);

    font-size: 11px;

    color: var(--text-faint);

}


.obj-trace__edge {

    font-family: var(--mono);

    font-size: 10px;

    padding: 1px 6px;

    color: var(--text-dim);

    background: transparent;

    border: 1px solid var(--border-strong);

    border-radius: 2px;

    cursor: pointer;

}


.obj-trace__edge:hover {

    color: var(--text);

    border-color: var(--accent-dim);

}


.obj-trace__kind {

    font-size: 9px;

    letter-spacing: 0.06em;

    color: var(--text-faint);

}


/* ---- 根对象 ---- */

.obj-root {

    margin-bottom: 12px;

}


.obj-root__label {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

    margin-bottom: 6px;

}


.obj-root .obj-node {

    max-width: 420px;

}


/* ---- 对象节点（中性格网）---- */

.obj-node-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));

    gap: 10px;

    margin-bottom: 12px;

}


.obj-node {

    display: block;

    width: 100%;

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 8px 10px;

    /* obj-node 是只读选择控件（button），需重置默认按钮样式 */
    font-family: var(--mono);

    font-size: 12px;

    color: inherit;

    text-align: left;

    cursor: pointer;

}


.obj-node:hover {

    border-color: var(--border-strong);

}


.obj-node.is-selected {

    border-color: var(--accent);

    box-shadow: inset 0 0 0 1px rgba(62, 160, 255, 0.35);

}


.obj-node:focus-visible {

    outline: 1px solid var(--accent);

    outline-offset: 1px;

}


.obj-node.is-created {

    border-color: var(--accent-dim);

}


.obj-node.is-not-created {

    border-style: dashed;

    background: transparent;

}


.obj-node.is-not-created .obj-node__type {

    color: var(--text-dim);

}


.obj-node__head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 6px;

}


.obj-node__type {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;

}


/* ---- 状态标记：CREATED / NOT CREATED YET 严格区分 ---- */

.obj-state {

    padding: 1px 6px;

    font-size: 9px;

    letter-spacing: 0.06em;

    border: 1px solid var(--border-strong);

    border-radius: 2px;

    white-space: nowrap;

    color: var(--text-dim);

}


.obj-state--created {

    color: var(--ok);

    border-color: #1f6b4d;

    background: #0f2a20;

}


.obj-state--pending {

    color: var(--muted);

    border-color: var(--border);

    background: transparent;

}


/* ---- 节点字段 ---- */

.obj-node__lines {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.obj-line {

    display: flex;

    gap: 8px;

    font-size: 10px;

    line-height: 1.6;

}


.obj-line__key {

    min-width: 62px;

    color: var(--text-faint);

    letter-spacing: 0.04em;

}


.obj-line__value {

    color: var(--text-dim);

    word-break: break-word;

}


.obj-line__value.is-id {

    color: var(--text);

    font-weight: 700;

}


.obj-line__value.is-empty {

    color: var(--muted);

    font-style: italic;

}


.obj-node__meta {

    display: block;

    margin-top: 6px;

    padding-top: 5px;

    border-top: 1px dotted #1b2735;

    font-size: 9px;

    color: var(--text-faint);

}


/* ---- Selected Object Detail（只读）---- */

.obj-detail {

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: #0e141c;

    padding: 10px 12px 12px;

    margin-bottom: 12px;

}


.obj-detail__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    border-bottom: 1px solid var(--border);

    padding-bottom: 8px;

    margin-bottom: 10px;

}


.obj-detail__title {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

}


.obj-detail__owner {

    font-size: 11px;

    color: var(--accent);

}


.obj-detail__empty {

    font-size: 11px;

    line-height: 1.7;

    color: var(--text-faint);

}


.obj-detail__group {

    margin-bottom: 10px;

}


.obj-detail__group-title {

    font-size: 9px;

    letter-spacing: 0.12em;

    color: var(--text-faint);

    margin-bottom: 4px;

}


.detail-row {

    display: flex;

    gap: 10px;

    padding: 2px 0;

    border-bottom: 1px dotted #26323f;

}


.detail-row__key {

    min-width: 168px;

    font-size: 10px;

    color: var(--text-faint);

}


.detail-row__value {

    font-size: 11px;

    color: var(--text-dim);

    word-break: break-word;

}


.detail-row__value.is-id {

    color: var(--text);

    font-weight: 700;

}


.detail-row__value.is-empty {

    color: var(--muted);

    font-style: italic;

}


.detail-row__value.is-created {

    color: var(--ok);

}


.detail-row__value.is-pending {

    color: var(--muted);

}


.obj-detail__hint {

    margin-top: 8px;

    padding-top: 7px;

    border-top: 1px dotted #1b2735;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ---- 关系边 ---- */

.obj-edges {

    border-top: 1px dotted #1b2735;

    padding-top: 10px;

}


.obj-edges__title {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

    margin-bottom: 6px;

}


.obj-edges__empty {

    font-size: 10px;

    color: var(--muted);

    font-style: italic;

}


.obj-edge {

    display: flex;

    align-items: baseline;

    gap: 8px;

    padding: 3px 0;

    border-bottom: 1px dotted #26323f;

}


.obj-edge__from {

    min-width: 132px;

    font-size: 11px;

    color: var(--text);

}


.obj-edge__arrow {

    color: var(--text-faint);

    font-size: 10px;

}


.obj-edge__to {

    min-width: 118px;

    font-size: 11px;

    color: var(--text);

}


.obj-edge__label {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    font-size: 10px;

}


.obj-edge__relationship {

    color: var(--text-dim);

}


.obj-edge__source {

    color: var(--text-faint);

}


.objgraph__note {

    margin-top: 10px;

    padding-top: 8px;

    border-top: 1px dotted #1b2735;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ============================================================
   U2-02 · Security Decision Inspector
   ------------------------------------------------------------
   只读展示后端返回的真实安全判定结果。
   配色仅依据 API 返回值，不构成任何安全判断。
   ============================================================ */

.decision {

    margin-top: 12px;

    background: var(--bg-panel);

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    padding: 12px 14px 14px;

}

/* ---- 页面内区域定位高亮 ----
   仅表达「用户被带到了这个区域」，不表达任何安全结论。 */

.decision.is-focused {

    border-color: var(--accent);

    box-shadow: inset 0 0 0 1px rgba(62, 160, 255, 0.35);

}


.decision__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    border-bottom: 1px solid var(--border);

    padding-bottom: 8px;

    margin-bottom: 12px;

}


.decision__title {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;

}


.decision__owner {

    font-size: 10px;

    color: var(--text-faint);

}


/* ---- 主信息 ---- */

.decision__facts {

    display: flex;

    flex-wrap: wrap;

    gap: 26px;

    margin-bottom: 12px;

}


.decision__fact-key {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

    margin-bottom: 3px;

}


.decision__fact-value {

    font-size: 15px;

    font-weight: 700;

    color: var(--text);

    word-break: break-word;

}


/* 仅配色：值取自 API 原文 */

.decision__fact-value--decision[data-decision="BLOCK"] {

    color: #ff7b72;

}


.decision__fact-value--decision[data-decision="ALLOW"] {

    color: var(--ok);

}


.decision__fact-value--decision[data-decision="HITL"] {

    color: var(--warn);

}


/* ---- 分组 ---- */

.decision__group {

    margin-bottom: 12px;

    padding-top: 10px;

    border-top: 1px dotted #1b2735;

}


.decision__group-title {

    font-size: 10px;

    letter-spacing: 0.12em;

    color: var(--text-faint);

    margin-bottom: 6px;

}


.decision__group-note {

    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


.decision__reason {

    font-size: 12px;

    line-height: 1.7;

    color: var(--text);

}


/* ---- Authorization Checks（逐项来自 API）---- */

.check-row {

    display: flex;

    align-items: baseline;

    gap: 8px;

    padding: 3px 0;

    border-bottom: 1px dotted #26323f;

    font-size: 11px;

}


.check-row__mark {

    min-width: 14px;

    text-align: center;

    font-weight: 700;

}


.check-row.is-passed .check-row__mark {

    color: var(--ok);

}


.check-row.is-failed .check-row__mark {

    color: #ff7b72;

}


.check-row__name {

    min-width: 178px;

    color: var(--text);

}


.check-row.is-failed .check-row__name {

    color: #ff7b72;

}


.check-row__detail {

    color: var(--text-faint);

    word-break: break-word;

}


/* ---- Execution ---- */

.decision__execution-status {

    display: inline-block;

    padding: 2px 10px;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

    border: 1px solid var(--border-strong);

    border-radius: 2px;

}


.decision__execution-status.is-not-performed {

    color: var(--text-dim);

    border-color: var(--border-strong);

    background: #0e141c;

}


.decision__execution-status.is-performed {

    color: var(--ok);

    border-color: #1f6b4d;

    background: #0f2a20;

}


.decision__note {

    margin-top: 10px;

    padding-top: 8px;

    border-top: 1px dotted #1b2735;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ============================================================
   U2-03 · Why This Decision?（Decision Path）
   ------------------------------------------------------------
   只读链路；节点内容全部来自 API 字段。
   左侧色条区分两段语义边界：
     AUTHORITATIVE DECISION（V7 真实判定） / NOT ENTERED（未进入的边界）
   ============================================================ */

.dpath {

    margin-top: 12px;

    background: var(--bg-panel);

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    padding: 12px 14px 14px;

}


.dpath__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    border-bottom: 1px solid var(--border);

    padding-bottom: 8px;

    margin-bottom: 12px;

}


.dpath__title {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;

}


.dpath__owner {

    font-size: 10px;

    color: var(--text-faint);

}


.dpath__checks {

    display: flex;

    flex-direction: column;

    margin-top: 6px;

}


/* ---- 语义分界 ---- */

.path-band {

    display: flex;

    align-items: baseline;

    gap: 10px;

    flex-wrap: wrap;

    margin: 14px 0 8px;

    padding-bottom: 6px;

    border-bottom: 1px dotted var(--border-strong);

}


.path-band__title {

    font-size: 10px;

    letter-spacing: 0.14em;

    color: var(--accent);

    border: 1px solid var(--accent-dim);

    border-radius: 2px;

    padding: 1px 6px;

}


.path-band__subtitle {

    font-size: 10px;

    color: var(--text-faint);

}


/* ---- 节点 ---- */

.path-node {

    border: 1px solid var(--border);

    border-left: 3px solid var(--border);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 8px 10px;

}


.path-node.is-authoritative {

    border-left-color: var(--accent);

}


.path-node.is-not-entered {

    border-left-color: var(--muted);

    border-style: dashed;

    background: transparent;

}


.path-node__head {

    display: flex;

    align-items: baseline;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 6px;

}


.path-node__step {

    font-size: 10px;

    color: var(--text-faint);

    letter-spacing: 0.08em;

}


.path-node__title {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

}


.path-node__status {

    margin-left: auto;

    padding: 1px 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.06em;

    border: 1px solid var(--border-strong);

    border-radius: 2px;

    color: var(--text-dim);

}


/* 仅配色：值为 API 原文 */

.path-node__status[data-decision="BLOCK"] {

    color: #ff7b72;

    border-color: #7d2b2b;

    background: #2a1414;

}


.path-node__status[data-decision="ALLOW"] {

    color: var(--ok);

    border-color: #1f6b4d;

    background: #0f2a20;

}


.path-node__status[data-decision="HITL"] {

    color: var(--warn);

    border-color: #6b5320;

    background: #2a2213;

}


.path-node__note {

    margin-top: 6px;

    padding-top: 5px;

    border-top: 1px dotted #1b2735;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ---- 连接线 ---- */

.path-connector {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 4px 0 4px 14px;

}


.path-connector__arrow {

    color: var(--text-faint);

    font-size: 13px;

}


.path-connector__caption {

    font-size: 10px;

    color: var(--text-faint);

    word-break: break-word;

}


.dpath__note {

    margin-top: 12px;

    padding-top: 8px;

    border-top: 1px dotted #1b2735;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ============================================================
   U2-04-S3 · Model / Agent Boundary View
   ------------------------------------------------------------
   只读展示信任层级的变化：

     MODEL OUTPUT REPLAY（UNTRUSTED）
             ↓
     ACTION PROPOSAL（中性）
             ↓
     TRUST TRANSITION（信任边界）
             ↓
     V7 SECURITY BOUNDARY（受信任）
             ↓
     CURRENT SECURITY DECISION（沿用 Decision 视觉语言）

   配色只区分信任层级与数据来源，不构成任何安全判断。
   ============================================================ */

.boundary {

    margin-top: 12px;

    background: var(--bg-panel);

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    padding: 12px 14px 14px;

}


.boundary__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

    border-bottom: 1px solid var(--border);

    padding-bottom: 8px;

    margin-bottom: 12px;

}


.boundary__title {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;

}


.boundary__owner {

    font-size: 10px;

    color: var(--text-faint);

}


.boundary__lead {

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

    margin-bottom: 10px;

}


/* ---- 阅读顺序 ---- */

.boundary__flow {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    padding: 6px 8px;

    margin-bottom: 6px;

    border: 1px dotted var(--border-strong);

    border-radius: 2px;

    background: var(--bg-elevated);

}


.boundary__flow-step {

    font-size: 10px;

    letter-spacing: 0.06em;

    color: var(--text-dim);

    border: 1px solid var(--border);

    border-radius: 2px;

    padding: 1px 6px;

}


.boundary__flow-arrow {

    font-size: 10px;

    color: var(--text-faint);

}


/* ---- ① 不可信层：虚线 + warn accent ---- */

.path-node.is-untrusted {

    border-color: var(--border-strong);

    border-left-color: var(--warn);

    border-style: dashed;

    background: transparent;

}


/* ---- ② 中性层：不标 UNTRUSTED，也不标 AUTHORIZED ---- */

.path-node.is-proposal {

    border-left-color: var(--border-strong);

}


/* ---- ③④ 信任边界层 ---- */

.path-node.is-boundary {

    border-left-color: var(--accent-dim);

}


/* ---- 状态徽章：仅按信任层级配色 ---- */

.path-node__status[data-tone="untrusted"] {

    color: var(--warn);

    border-color: #6b5320;

    background: #2a2213;

}


.path-node__status[data-tone="trusted"] {

    color: var(--accent);

    border-color: var(--accent-dim);

    background: #0e2233;

}


.path-node__status[data-tone="neutral"] {

    color: var(--text-dim);

}


/* ---- 不可信横幅 ---- */

.boundary__banner {

    margin-top: 6px;

    padding: 4px 8px;

    border: 1px dashed #6b5320;

    border-radius: 2px;

    background: #221b10;

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--warn);

}


/* ---- 字段分组（Field Sources / Tool Parameters / Checks）---- */

.boundary__group {

    margin-top: 8px;

    padding-top: 6px;

    border-top: 1px dotted #1b2735;

}


.boundary__group-title {

    font-size: 10px;

    letter-spacing: 0.1em;

    color: var(--text-faint);

    margin-bottom: 4px;

}


.boundary__group-note {

    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ---- 信任层级链 ---- */

.boundary__chain {

    display: flex;

    flex-direction: column;

    gap: 2px;

    margin: 6px 0 4px;

}


.boundary__chain-step {

    border: 1px solid var(--border);

    border-left: 3px solid var(--border-strong);

    border-radius: 2px;

    background: var(--bg-elevated);

    padding: 5px 8px;

}


.boundary__chain-step.is-untrusted {

    border-left-color: var(--warn);

    border-style: dashed;

    background: transparent;

}


.boundary__chain-step.is-trusted {

    border-left-color: var(--accent);

}


.boundary__chain-name {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.06em;

}


.boundary__chain-trust {

    font-size: 10px;

    color: var(--text-faint);

}


.boundary__chain-trust.is-untrusted {

    color: var(--warn);

}


.boundary__chain-trust.is-trusted {

    color: var(--accent);

}


.boundary__chain-arrow {

    font-size: 11px;

    color: var(--text-faint);

    padding-left: 10px;

}


/* ---- CORRELATION: NOT PROVEN（PROVENANCE LIMITATION，不是 ERROR）---- */

.boundary__limit {

    margin-top: 8px;

    padding: 6px 8px;

    border: 1px dashed var(--border-strong);

    border-left: 3px solid var(--warn);

    border-radius: 2px;

    background: #171d25;

}


.boundary__limit-title {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.1em;

    color: var(--warn);

    margin-bottom: 4px;

}


.boundary__limit-body {

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

}


/* ---- ⑤ Current Security Decision：沿用 Decision 视觉语言 ---- */

.boundary__decision {

    border: 1px solid var(--border);

    border-left: 3px solid var(--accent);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 10px 12px;

}


/* ---- Provenance Note ---- */

.boundary__provenance {

    margin-top: 14px;

    padding-top: 8px;

    border-top: 1px dotted var(--border-strong);

}


.boundary__provenance-title {

    font-size: 10px;

    letter-spacing: 0.1em;

    color: var(--text-faint);

    margin-bottom: 6px;

}


.boundary__provenance-list {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.boundary__provenance-item {

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

    padding-left: 10px;

    border-left: 2px solid var(--border-strong);

}


.boundary__provenance-note {

    margin-top: 8px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ============================================================
   MCP / Trust Architecture View（U3-04）
   ------------------------------------------------------------
   本段只负责展示层样式，不含任何安全逻辑：
     颜色不表达安全结论，只区分"已发生 / 未发生"与"allow / deny"。
     NOT PERFORMED 一律使用弱化 + 虚线，绝不使用绿色（避免被读成"成功"）。
   ============================================================ */

/* ---- 通用小节标题 ---- */

.mcp-section__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 8px;

}


.mcp-section__title {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

}


.mcp-section__owner {

    font-size: 10px;

    color: var(--text-faint);

}


/* ---- 值（只用于配色）---- */

.mcp-value {

    font-family: var(--mono);

}


.mcp-value.is-allow {

    color: var(--ok);

}


.mcp-value.is-deny {

    color: #ff7b72;

}


/* ---- Provenance Strip ---- */

.mcp-strip {

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-panel);

    padding: 12px;

    margin-bottom: 14px;

}


.mcp-strip__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));

    gap: 8px;

}


.mcp-strip__item {

    border: 1px solid var(--border);

    border-left-width: 3px;

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 8px 10px;

}


.mcp-strip__item.is-neutral {

    border-left-color: var(--accent-dim);

}


/* 未发生：弱化 + 虚线，绝不使用绿色 */

.mcp-strip__item.is-not-performed {

    border-left-color: var(--muted);

    border-left-style: dashed;

    background: transparent;

}


.mcp-strip__key {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}


.mcp-strip__value {

    margin-top: 2px;

    font-size: 12px;

    font-weight: 700;

    color: var(--text-dim);

}


.mcp-strip__item.is-not-performed .mcp-strip__value {

    color: var(--text-faint);

}


.mcp-strip__note {

    margin-top: 4px;

    font-size: 10px;

    line-height: 1.6;

    color: var(--text-faint);

}


.mcp-strip__lead {

    margin-top: 10px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ---- NOT PROVEN ---- */

.mcp-notproven {

    border: 1px solid var(--border-strong);

    border-left: 3px solid var(--warn);

    border-radius: 3px;

    background: var(--bg-panel);

    padding: 12px;

    margin-bottom: 14px;

}


.mcp-notproven__lead {

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

    margin-bottom: 10px;

}


.mcp-notproven__item {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 8px 0;

    border-top: 1px solid var(--border);

}


.mcp-notproven__status {

    flex: none;

    padding: 1px 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.06em;

    border: 1px dashed var(--border-strong);

    border-radius: 2px;

    color: var(--warn);

}


.mcp-notproven__body {

    min-width: 0;

}


.mcp-notproven__claim {

    font-size: 11px;

    font-weight: 700;

    color: var(--text);

}


.mcp-notproven__basis {

    margin-top: 2px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

}


.mcp-notproven__source {

    margin-top: 2px;

    font-size: 10px;

    color: var(--text-faint);

}


/* ---- 普通用户认知引导（MCP 页面专用，不改全局布局）---- */

.mcp-overview {
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    background: var(--bg-elevated);
    padding: 12px 14px;
    margin-bottom: 14px;

}

.mcp-overview__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;

}

.mcp-overview__intro {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px;

}

.mcp-overview__item {
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-dim);
    padding-left: 2px;

}

.mcp-arch {
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    background: var(--bg-panel);
    padding: 12px 14px;
    margin-bottom: 14px;

}

.mcp-arch__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;

}

.mcp-arch__lead {
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 8px;

}

.mcp-arch__plane-label {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);

}

.mcp-arch__plane-text {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-dim);

}

/* 认知引导句：细斜体弱化，不抢正文权重 */
.mcp-lead {
    margin: 0;
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-dim);
    font-style: italic;

}

/* Plane A 内的引导句交给 flex gap 控制间距，避免额外留白 */
.mcp-plane__body > .mcp-lead {
    margin: 0;
}


/* ---- Plane ---- */

.mcp-plane {

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-panel);

    padding: 14px;

    margin-bottom: 16px;

}


.mcp-plane__head {

    display: flex;

    align-items: baseline;

    gap: 10px;

    flex-wrap: wrap;

}


.mcp-plane__id {

    padding: 1px 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;

    border: 1px solid var(--accent-dim);

    border-radius: 2px;

    color: var(--accent);

}


.mcp-plane__title {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.08em;

}


.mcp-plane__subtitle {

    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


.mcp-plane__body {

    margin-top: 14px;

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.mcp-plane__body > .panel-grid {

    margin-bottom: 0;

}


/* ---- selector 内的状态标签 ---- */

.selector__tag {

    margin-left: 6px;

    font-size: 9px;

    letter-spacing: 0.06em;

    color: var(--text-faint);

}


.selector__chip.is-active .selector__tag {

    color: var(--text-dim);

}


/* ---- 判定区块（ALLOWED / NOT PERFORMED）---- */

.mcp-verdict {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));

    gap: 8px;

}


.mcp-verdict__item {

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 8px 10px;

}


.mcp-verdict__key {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}


.mcp-verdict__value {

    margin-top: 2px;

    font-size: 13px;

    font-weight: 700;

    color: var(--text-dim);

}


.mcp-verdict__value.is-allow {

    color: var(--ok);

}


.mcp-verdict__value.is-deny {

    color: #ff7b72;

}


/* AUTHORIZATION = ALLOWED 使用强调色而不是绿色：
   授权结论不等于"执行成功"，避免被读成成功状态 */

.mcp-verdict__value.is-allowed {

    color: var(--accent);

}


/* 未发生：弱化 + 虚线，绝不使用绿色 */

.mcp-verdict__value.is-not-performed {

    color: var(--text-faint);

    border: 1px dashed var(--border-strong);

    border-radius: 2px;

    padding: 0 6px;

    display: inline-block;

}


/* 观察值：明确不属于判定 */

.mcp-verdict__value.is-observation {

    color: var(--text-dim);

}


.mcp-verdict--boundary .mcp-verdict__item {

    min-height: 56px;

}


/* ---- Observation（不在决策路径上）---- */

.mcp-observe {

    border: 1px dashed var(--border-strong);

    border-radius: 3px;

    background: transparent;

    padding: 8px 10px;

}


.mcp-observe__title {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}


.mcp-observe__body {

    margin-top: 4px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

}


/* ---- Server Trust ≠ Tool Trust ---- */

.mcp-teach__note {

    margin-top: 8px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

}


.mcp-teach__counter {

    margin-top: 10px;

    border: 1px solid var(--border);

    border-left: 3px solid var(--accent-dim);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 10px 12px;

}


.mcp-teach__counter-title {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}


.mcp-teach__counter-body {

    margin-top: 4px;

    font-size: 12px;

    font-weight: 700;

}


.mcp-teach__counter-rows {

    margin-top: 6px;

}


.mcp-teach__counter-note {

    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ---- 决策路径 ---- */

.mcp-path {

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 12px;

}


.mcp-path__lead {

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

    margin-bottom: 10px;

}


.mcp-path__track {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    max-width: 520px;

}


.mcp-path__track .path-connector {

    align-self: flex-start;

    padding-left: 16px;

}


.mcp-path > .mcp-observe {

    margin-top: 10px;

    max-width: 520px;

}


/* ---- 子区块（HITL / Chain Policy）---- */

.mcp-sub {

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 10px 12px;

}


.mcp-sub__rows {

    margin-top: 8px;

}


.mcp-sub__note {

    margin-top: 8px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ---- Audit Trail ---- */

.mcp-trail__row {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    padding: 4px 0;

    border-bottom: 1px solid var(--border);

}


.mcp-trail__row:last-child {

    border-bottom: none;

}


.mcp-trail__event {

    flex: none;

    min-width: 150px;

    font-size: 11px;

    font-weight: 700;

    color: var(--text-dim);

}


.mcp-trail__details {

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

    word-break: break-word;

}


/* ---- Execution Boundary ---- */

.mcp-exec {

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-panel);

    padding: 14px;

}


.mcp-gate {

    margin-top: 12px;

    padding: 10px 12px;

    border-left: 2px dashed var(--border-strong);

    font-size: 11px;

    color: var(--text-faint);

    line-height: 1.9;

}


.mcp-gate__from {

    color: var(--text-dim);

}


.mcp-gate__arrow {

    color: var(--text-faint);

}


.mcp-gate__to {

    color: var(--text-dim);

}


/* 门未通过：弱化 + 虚线，不使用绿色 */

.mcp-gate__mark {

    margin-top: 2px;

    color: var(--text-faint);

    border: 1px dashed var(--border-strong);

    border-radius: 2px;

    padding: 1px 6px;

    display: inline-block;

}


.mcp-exec__note {

    margin-top: 12px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

}


/* ============================================================
   Inspector（U3-05）
   ------------------------------------------------------------
   只做展示层：Server / Tool 的详情面板。
   分组复用 .mcp-sub；这里只补 panel 外壳与 WHY 链条排版。
   ============================================================ */

.mcp-inspector {

    border: 1px solid var(--border-strong);

    border-left: 3px solid var(--accent-dim);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 12px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.mcp-inspector > .mcp-section__head {

    margin-bottom: 0;

}


.mcp-inspector__subject {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.06em;

    color: var(--text);

    padding-bottom: 8px;

    border-bottom: 1px solid var(--border);

}


/* ---- WHY THIS TRUST? 链条 ---- */

.mcp-why {

    margin-top: 8px;

    border: 1px dashed var(--border-strong);

    border-radius: 3px;

    background: transparent;

    padding: 10px 12px;

}


.mcp-why__step {

    font-size: 11px;

    color: var(--text-dim);

    word-break: break-word;

}


.mcp-why__arrow {

    font-size: 11px;

    color: var(--text-faint);

    line-height: 1.4;

}


/* ---- Inspector 内的 NOT PROVEN（紧凑，不重复大间距）---- */

.mcp-notproven--inline {

    margin-bottom: 0;

    background: transparent;

}


.mcp-notproven--inline .mcp-notproven__item:first-of-type {

    border-top: none;

    padding-top: 0;

}


/* ============================================================
   U5 · Runtime Observation（只读观察视图 · U5-06B）
   ------------------------------------------------------------
   只补 U5 模块自身的排版；复用既有：
     notice / field-row / field-note / state-block / selector
   状态视觉约束：
     ENABLED / NOT ENABLED / EMPTY / ERROR 一律中性表达，
     不得表现为 security deny（无红色 ✕、无 DENY / blocked /
     rejected 语义，也不使用 --ok 绿表示任何安全结论）。
   ============================================================ */

.u5-section__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;

}

.u5-section__title {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

}

.u5-section__owner {

    font-size: 10px;

    color: var(--text-faint);

}


/* ---- Observer Status Strip ---- */

.u5-status {

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 12px 14px;

    margin-bottom: 14px;

}

.u5-status__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 10px;

}

.u5-status__item {

    border: 1px solid var(--border);

    border-left: 3px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 8px 10px;

}

.u5-status__item.is-enabled {

    border-left-color: var(--accent-dim);

}

.u5-status__item.is-not-enabled {

    border-left-color: var(--muted);

}

.u5-status__item.is-neutral {

    border-left-color: var(--border-strong);

}

.u5-status__key {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}

.u5-status__value {

    font-size: 13px;

    color: var(--text);

    margin: 3px 0 5px;

}

.u5-status__item.is-enabled .u5-status__value {

    color: var(--accent);

}

.u5-status__item.is-not-enabled .u5-status__value {

    color: var(--text-dim);

}

.u5-status__note {

    font-size: 10px;

    line-height: 1.6;

    color: var(--text-faint);

    word-break: break-word;

}

.u5-status__lead {

    margin-top: 10px;

    padding-top: 8px;

    border-top: 1px dotted #1b2735;

    font-size: 11px;

    color: var(--text-dim);

}


/* ---- Observation List ---- */

.u5-list {

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 12px 14px;

}

.u5-list__lead {

    font-size: 11px;

    color: var(--text-dim);

    margin-bottom: 6px;

}

.u5-list__note {

    font-size: 11px;

    line-height: 1.7;

    color: var(--text-faint);

    margin-bottom: 12px;

}

.u5-obs {

    border: 1px solid var(--border);

    border-left: 3px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 10px 12px;

    margin-bottom: 10px;

}

.u5-obs:last-child {

    margin-bottom: 0;

}

/*: 审计页被选中 Run 的就地展开详情容器：直接位于该 Run 卡片下方，
   与下方下一条 Run 卡片保持一致间距；仅布局，不影响安全语义。 */
.u5-inline-detail {

    margin: 0 0 10px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 12px 14px;

}

/*: 审计页 Run 列表分页控件：纯 UI 翻页，不表达任何安全结论。 */
.u5-pager {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0 0 10px;

    padding: 6px 0;

}

.u5-pager__info {

    font-size: 11px;

    letter-spacing: 0.04em;

    color: var(--text-dim);

}

.u5-pager__btn {

    font-size: 11px;

    line-height: 1;

    padding: 6px 12px;

    color: var(--text);

    background: var(--bg-elevated);

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    cursor: pointer;

}

.u5-pager__btn:hover:not(:disabled) {

    border-color: var(--accent-dim);

    color: var(--accent);

}

.u5-pager__btn:focus-visible {

    outline: 1px solid var(--accent);

    outline-offset: 1px;

}

.u5-pager__btn:disabled {

    color: var(--text-faint);

    background: var(--bg-panel);

    border-color: var(--border);

    cursor: default;

}

.u5-obs__head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    padding-bottom: 8px;

    margin-bottom: 8px;

    border-bottom: 1px solid var(--border);

}

.u5-obs__id {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

    color: var(--text);

}

.u5-obs__plane {

    font-size: 11px;

    color: var(--text-dim);

}


/* ---- Observation Selection（U5-06C）----
   选择只使用中性 / accent 语义：
   不使用绿色表示 selected，也不表达任何安全结论。 */

.u5-obs--selectable {

    cursor: pointer;

}

.u5-obs--selectable:hover {

    border-color: var(--border-strong);

    border-left-color: var(--accent-dim);

}

.u5-obs.is-selected {

    border-color: var(--accent);

    border-left-color: var(--accent);

    box-shadow: inset 0 0 0 1px rgba(62, 160, 255, 0.35);

}

.u5-obs:focus-visible {

    outline: 1px solid var(--accent);

    outline-offset: 1px;

}

.u5-obs__select {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}

.u5-obs.is-selected .u5-obs__select {

    color: var(--accent);

}


/* ---- Observation Detail（U5-06C）---- */

.u5-detail {

    margin-top: 14px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 12px 14px;

}

/* ---- 就地展开的事件详情（运行审计）----
   详情嵌套在被点击的那条事件内部，其它事件整体向后推。 */

.u5-detail--inline {

    margin-top: 10px;

    padding: 10px 12px;

}

.u5-detail__part {

    margin-top: 14px;

    padding-top: 12px;

    border-top: 1px dotted #1b2735;

}

.u5-section__head + .u5-detail__part {

    margin-top: 0;

    padding-top: 0;

    border-top: none;

}

.u5-detail__value {

    display: inline-flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 8px;

}

.u5-detail__empty-title {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

    color: var(--text);

    margin-bottom: 6px;

}

.u5-detail__note {

    font-size: 11px;

    line-height: 1.7;

    color: var(--text-faint);

}

.u5-final--not-produced {

    color: var(--muted);

}

/* INCOMPLETE = warn banner：只声明记录不完整，不解释原因 */
.u5-session-warn {

    margin: 8px 0 4px;

    padding: 6px 8px;

    border: 1px dashed var(--border-strong);

    border-left: 3px solid var(--warn);

    border-radius: 2px;

    background: #171d25;

    color: var(--warn);

    font-size: 11px;

    letter-spacing: 0.06em;

}


/* ---- Provenance 标签（U5-06C §12 / §18）----
   中性表达：绿色不用于任何安全结论；这里只区分 provenance 来源。 */

.u5-prov {

    padding: 1px 6px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    font-size: 10px;

    letter-spacing: 0.06em;

    color: var(--text-dim);

}

.u5-prov.is-derived {

    color: var(--accent);

    border-color: var(--accent-dim);

}

.u5-prov.is-unverified {

    color: var(--warn);

    border-color: var(--border-strong);

}

.u5-prov.is-not-retained {

    color: var(--text-faint);

}

.u5-prov.is-not-proven {

    color: var(--muted);

}


/* ---- Decision Flow (Recorded)（U5-07B）----
   只呈现「已记录的决策输入 / 输出」：
     · 没有任何箭头 / 方向性连接符（不隐含 runtime 因果）
     · 节点之间只用中性分隔
     · 不使用绿色勾 / 红色叉 / 执行图标表达任何安全结论
     · 缺失与未评估一律中性（muted / dashed），不是 error、不是 deny */

.u5-flow {

    margin-top: 14px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 12px 14px;

}

/* header note：中性信息说明，不是 warning / error */
.u5-flow__header-note {

    display: inline-block;

    margin-bottom: 8px;

    padding: 2px 8px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-dim);

}

.u5-flow__note {

    margin: 4px 0;

    font-size: 11px;

    line-height: 1.7;

    color: var(--text-faint);

}

.u5-flow__node {

    border: 1px solid var(--border);

    border-left: 3px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 10px 12px;

}

.u5-flow__node-head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 6px;

}

.u5-flow__node-title {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

    color: var(--text);

}

.u5-flow__chips {

    display: inline-flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 6px;

}

/* 节点状态标签：中性，不表达 allow / deny / 已采纳 */
.u5-flow__state {

    padding: 1px 6px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    font-size: 10px;

    letter-spacing: 0.06em;

    color: var(--text-dim);

}

.u5-flow__value {

    margin: 2px 0;

    font-size: 13px;

    color: var(--text);

    word-break: break-word;

}

/* 缺失 / 未产生：中性状态，不是红色 ✕，也不表示 deny */
.u5-flow__missing {

    margin: 2px 0;

    font-size: 11px;

    letter-spacing: 0.06em;

    color: var(--muted);

}

/* execute = true ≠ executed：只用文字区分，不用绿色成功视觉 */
.u5-flow__neq {

    display: inline-block;

    margin: 4px 0;

    padding: 2px 8px;

    border: 1px dashed var(--border-strong);

    border-radius: 3px;

    font-size: 11px;

    letter-spacing: 0.06em;

    color: var(--accent);

}

/* 中性分隔：显式声明显示顺序不是 runtime 调用顺序（不是箭头 / 连线） */
.u5-flow__sep {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 10px 0;

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}

.u5-flow__sep::before,
.u5-flow__sep::after {

    content: "";

    flex: 1;

    border-top: 1px dashed var(--border-strong);

}

/* Chain Policy 未评估：muted + dashed，不表达 success / allow */
.u5-flow__node.is-not-evaluated {

    border-style: dashed;

    border-left-style: solid;

    background: transparent;

}

/* 节点内的记录行沿用既有 field-row 排版，仅收敛间距 */
.u5-flow__node .field-row {

    margin: 2px 0;

}


/* ---- Execution Boundary（U5-08B）----
   只呈现 U5 Observation Layer 的模块级能力边界：
     · 与 Decision Flow 之间有强分界（terminus），不是历史关系线、
       不是箭头、不产生 Observation → Execution 关联
     · 一律中性：不使用 success 绿 / deny 红 / error ✕，
       不使用 execution / network 图标，不使用 evidence 勾选符号
     · NOT RETAINED  → faint neutral
       NOT PROVEN    → neutral dim
       NOT GENERATED → 中性 boundary 措辞 */

.u5-boundary {

    margin-top: 14px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 3px;

    padding: 12px 14px;

}

/* 终止标记：AUTHORIZATION OBSERVATION ENDS HERE
   强边界，仅声明观察范围的终点（无方向性连接符） */
.u5-boundary__terminus {

    margin: 2px 0 12px;

    padding: 10px 0;

    border-top: 3px solid var(--border-strong);

    border-bottom: 3px solid var(--border-strong);

    text-align: center;

}

.u5-boundary__terminus-text {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.14em;

    color: var(--text-dim);

}

.u5-boundary__terminus-value {

    margin-top: 5px;

    font-size: 11px;

    letter-spacing: 0.06em;

    color: var(--text-faint);

    word-break: break-word;

}

.u5-boundary__terminus-note {

    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}

/* 核心不等式：只用文字区分，不用绿色成功视觉（与 .u5-flow__neq 一致） */
.u5-boundary__lead {

    display: inline-block;

    margin: 8px 0 4px;

    padding: 2px 8px;

    border: 1px dashed var(--border-strong);

    border-radius: 3px;

    font-size: 11px;

    letter-spacing: 0.06em;

    color: var(--accent);

}

.u5-boundary__note {

    margin: 4px 0;

    font-size: 11px;

    line-height: 1.7;

    color: var(--text-faint);

}

.u5-boundary__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

    gap: 8px;

    margin-top: 10px;

}

.u5-boundary__item {

    border: 1px solid var(--border);

    border-left: 3px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-elevated);

    padding: 8px 10px;

}

.u5-boundary__label {

    font-size: 11px;

    letter-spacing: 0.06em;

    color: var(--text-dim);

}

.u5-boundary__state {

    margin: 3px 0 5px;

    font-size: 12px;

    letter-spacing: 0.08em;

}

/* NOT RETAINED：faint neutral（不是 error、不是 deny、不是「不存在」） */
.u5-boundary__state.is-not-retained {

    color: var(--text-faint);

}

/* NOT PROVEN：neutral dim（不是 DENIED） */
.u5-boundary__state.is-not-proven {

    color: var(--muted);

}

/* NOT GENERATED：中性 boundary 措辞 */
.u5-boundary__state.is-not-generated {

    color: var(--text-dim);

}

/* NOT PRESENT IN PAYLOAD：只表达 payload 完整性 */
.u5-boundary__state.is-missing {

    color: var(--muted);

}

.u5-boundary__basis {

    font-size: 10px;

    line-height: 1.6;

    color: var(--text-faint);

    word-break: break-word;

}

.u5-boundary__wording {

    margin-top: 4px;

    font-size: 10px;

    line-height: 1.6;

    color: var(--muted);

    word-break: break-word;

}


/* ============================================================
   Evidence Inspector（Evidence Observer · 只读 · UI-07）
   ------------------------------------------------------------
   展示层约束（与 Execution Inspector 完全一致）：
     · 只复用既有颜色变量，不新增颜色体系
     · 一致中性配色：不出现「绿 = 安全 / 红 = 攻击」的语义
     · Evidence 没有 status / lifecycle，因此不渲染任何 status badge
     · NOT INSTANTIATED 不是任何状态值，因此也不使用 badge
   .ev-* / .exec-* / .fd-* 共用同一套视觉规则（下方选择器成组声明），
   以保证三个 Observer 页面呈现一致的「只读观察器」外观。
   ============================================================ */

.exec-context,
.ev-context,
.fd-context {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 10px;

    padding: 8px 10px;

    margin-bottom: 10px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 4px;

}

.exec-context__key,
.ev-context__key,
.fd-context__key {

    font-size: 9px;

    letter-spacing: 0.12em;

    color: var(--text-faint);

}

.exec-context__value,
.ev-context__value,
.fd-context__value {

    font-size: 12px;

    font-weight: 700;

    color: var(--text);

}

.exec-context__note,
.ev-context__note,
.fd-context__note {

    font-size: 10px;

    color: var(--text-faint);

}

.exec-section,
.ev-section,
.fd-section {

    margin-bottom: 14px;

}

.exec-section__head,
.ev-section__head,
.fd-section__head {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    justify-content: space-between;

    gap: 8px;

    padding-bottom: 5px;

    margin-bottom: 8px;

    border-bottom: 1px solid var(--border);

}

.exec-section__title,
.ev-section__title,
.fd-section__title {

    font-size: 11px;

    letter-spacing: 0.08em;

    color: var(--text);

}

.exec-section__owner,
.ev-section__owner,
.fd-section__owner {

    font-size: 9px;

    color: var(--text-faint);

}

/* ---- Execution List ---- */

.exec-list,
.ev-list,
.fd-list {

    display: grid;

    gap: 6px;

}

.exec-item,
.ev-item,
.fd-item {

    display: block;

    width: 100%;

    padding: 8px 10px;

    text-align: left;

    background: var(--bg-elevated);

    border: 1px solid var(--border);

    border-radius: 4px;

    color: var(--text-dim);

    font-family: var(--mono);

    font-size: 10px;

    cursor: pointer;

}

.exec-item:hover,
.ev-item:hover,
.fd-item:hover {

    border-color: var(--border-strong);

}

.exec-item:focus-visible,
.ev-item:focus-visible,
.fd-item:focus-visible {

    outline: 1px solid var(--accent-dim);

    outline-offset: 1px;

}

.exec-item.is-selected,
.ev-item.is-selected,
.fd-item.is-selected {

    border-color: var(--accent-dim);

}

.exec-item__head,
.ev-item__head,
.fd-item__head {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 3px;

}

.exec-item__id,
.ev-item__id,
.fd-item__id {

    font-size: 11px;

    font-weight: 700;

    color: var(--text);

}

.exec-item__line,
.ev-item__line,
.fd-item__line {

    font-size: 10px;

    color: var(--text-faint);

    word-break: break-word;

}

/* ---- Type badge（中性：只表达 API 原样 evidence_type；无 status）---- */

.exec-status,
.ev-type,
.fd-status {

    display: inline-block;

    padding: 1px 6px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: transparent;

    font-size: 9px;

    letter-spacing: 0.08em;

    color: var(--text-dim);

}

/* ---- 空态：NOT INSTANTIATED（不是任何状态值，故不用 badge）---- */

.exec-absent,
.ev-absent,
.fd-absent {

    padding: 18px 14px;

    background: var(--bg-panel);

    border: 1px dashed var(--border-strong);

    border-radius: 4px;

    text-align: center;

}

.exec-absent__label,
.ev-absent__label,
.fd-absent__label {

    font-size: 10px;

    letter-spacing: 0.22em;

    color: var(--text-faint);

}

.exec-absent__state,
.ev-absent__state,
.fd-absent__state {

    margin-top: 6px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.06em;

    color: var(--muted);

}

.exec-absent__note,
.ev-absent__note,
.fd-absent__note {

    margin-top: 8px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}

/* ---- Detail ---- */

.exec-detail,
.ev-detail,
.fd-detail {

    padding: 10px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 4px;

}

.exec-empty,
.ev-empty,
.fd-empty {

    padding: 12px;

    background: var(--bg-panel);

    border: 1px dashed var(--border);

    border-radius: 4px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}

.exec-note,
.ev-note,
.fd-note {

    margin-top: 8px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ============================================================
   P1-07 · 实验运行观察（Run Observer · 只读投影）
   ------------------------------------------------------------
   样式原则：
     · 复用既有设计令牌（不引入第二套颜色系统 / 不新增颜色变量）
     · Run Status 为中性配色：Run 编排状态不表达任何安全含义
     · Security Outcome 只按 API 原文配色（沿用安全决策检查器已有的
       BLOCK / ALLOW / HITL 配色，不新增任何语义）
     · Step 状态只用边框与文字色区分：COMPLETED / FAILED /
       NOT_REACHED / BLOCKED 外观彼此不同，
       尤其 NOT_REACHED（虚线 + 弱化）不会与 BLOCKED 混同
     · 未识别的状态使用中性外观，绝不并入其它状态
   ============================================================ */

.runs-toolbar {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 10px;

    padding: 8px 10px;

    margin-bottom: 10px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 4px;

}

.runs-toolbar__label {

    font-size: 11px;

    letter-spacing: 0.08em;

    color: var(--text);

}

.runs-toolbar__count {

    font-family: var(--mono);

    font-size: 12px;

    font-weight: 700;

    color: var(--text);

}

.runs-toolbar__note {

    font-size: 10px;

    color: var(--text-faint);

}

.runs-refresh {

    margin-left: auto;

    padding: 3px 10px;

    background: transparent;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    color: var(--text-dim);

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: 0.06em;

    cursor: pointer;

}

.runs-refresh:hover {

    border-color: var(--accent-dim);

    color: var(--text);

}

.runs-refresh:focus-visible {

    outline: 1px solid var(--accent-dim);

    outline-offset: 1px;

}

.runs-section {

    margin-bottom: 14px;

}

.runs-section__head {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    justify-content: space-between;

    gap: 8px;

    padding-bottom: 5px;

    margin-bottom: 8px;

    border-bottom: 1px solid var(--border);

}

.runs-section__title {

    font-size: 11px;

    letter-spacing: 0.08em;

    color: var(--text);

}

.runs-section__owner {

    font-size: 9px;

    color: var(--text-faint);

}

/* ---- Run Index / List ---- */

.runs-list {

    display: grid;

    gap: 6px;

}

.runs-item {

    display: block;

    width: 100%;

    padding: 8px 10px;

    text-align: left;

    background: var(--bg-elevated);

    border: 1px solid var(--border);

    border-radius: 4px;

    color: var(--text-dim);

    font-family: var(--mono);

    font-size: 10px;

    cursor: pointer;

}

.runs-item:hover {

    border-color: var(--border-strong);

}

.runs-item:focus-visible {

    outline: 1px solid var(--accent-dim);

    outline-offset: 1px;

}

.runs-item.is-selected {

    border-color: var(--accent-dim);

}

.runs-item__head {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-bottom: 3px;

}

.runs-item__id {

    font-size: 11px;

    font-weight: 700;

    color: var(--text);

}

.runs-item__line {

    font-size: 10px;

    color: var(--text-faint);

    word-break: break-word;

}

/* ---- Status chip（中性：Run 编排状态不表达安全结论）---- */

.runs-status,
.runs-source,
.runs-outcome {

    display: inline-block;

    padding: 1px 6px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: transparent;

    font-size: 9px;

    letter-spacing: 0.08em;

    color: var(--text-dim);

}

/* ---- Security Outcome：仅配色，值一律取自 API 原文 ---- */

.runs-outcome[data-outcome="BLOCK"] {

    color: #ff7b72;

}

.runs-outcome[data-outcome="ALLOW"] {

    color: var(--ok);

}

.runs-outcome[data-outcome="HITL"] {

    color: var(--warn);

}

.runs-note {

    margin-top: 8px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}

.runs-empty {

    padding: 12px;

    background: var(--bg-panel);

    border: 1px dashed var(--border);

    border-radius: 4px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}

/* ---- Run Detail ---- */

.runs-detail {

    padding: 10px;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 4px;

}

.runs-identity {

    padding-bottom: 8px;

    margin-bottom: 10px;

    border-bottom: 1px solid var(--border);

}

.runs-identity__id {

    font-family: var(--mono);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.04em;

    color: var(--text);

}

.runs-identity__scenario {

    margin-top: 2px;

    font-family: var(--mono);

    font-size: 11px;

    color: var(--text-dim);

}

.runs-identity__dims {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 10px;

}

.runs-dim {

    display: flex;

    align-items: baseline;

    gap: 6px;

}

.runs-dim__key {

    font-size: 9px;

    letter-spacing: 0.12em;

    color: var(--text-faint);

}

/* ---- Domain Reference 的缺失语义（NOT CREATED ≠ BLOCK / DENY）---- */

.runs-ref-value {

    font-weight: 700;

    color: var(--text);

}

.runs-ref-value.is-not-created {

    font-weight: 400;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}

/* ---- Execution / Step Ledger ---- */

.runs-section--ledger {

    margin-top: 6px;

}

.runs-ledger__legend {

    display: grid;

    gap: 4px;

    padding: 8px 10px;

    margin-bottom: 8px;

    background: var(--bg-panel);

    border: 1px dashed var(--border);

    border-radius: 4px;

}

.runs-ledger__legend-item {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 8px;

}

.runs-ledger__legend-note {

    font-size: 10px;

    color: var(--text-faint);

}

.runs-ledger {

    display: grid;

    gap: 6px;

}

.runs-step {

    display: flex;

    gap: 10px;

    padding: 8px 10px;

    background: var(--bg-elevated);

    border: 1px solid var(--border);

    border-radius: 4px;

}

.runs-step__index {

    min-width: 22px;

    font-family: var(--mono);

    font-size: 11px;

    color: var(--text-faint);

}

.runs-step__body {

    flex: 1;

    min-width: 0;

}

.runs-step__head {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

}

.runs-step__name {

    font-family: var(--mono);

    font-size: 11px;

    font-weight: 700;

    color: var(--text);

}

/* ---- Step 状态：只用外观区分，绝不互相混同 ---- */

.runs-step__status {

    display: inline-block;

    padding: 1px 6px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: transparent;

    font-size: 9px;

    letter-spacing: 0.08em;

    color: var(--text-dim);

}

.runs-step__status.is-completed {

    color: var(--text);

}

.runs-step__status.is-failed {

    border-color: var(--warn);

    color: var(--warn);

}

.runs-step__status.is-not-reached {

    border-style: dashed;

    color: var(--text-faint);

}

.runs-step__status.is-blocked {

    border-color: var(--accent-dim);

    border-left-width: 3px;

    color: var(--text);

}

.runs-step__status.is-unknown {

    border-style: dotted;

    color: var(--text-dim);

}

.runs-step__detail {

    margin-top: 4px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-dim);

    word-break: break-word;

}

.runs-step__line {

    margin-top: 2px;

    font-size: 10px;

    color: var(--text-faint);

    word-break: break-word;

}


/* ============================================================
   UI-09-02 · 09 Retest / Lifecycle（Snapshot Observation 只读）
   ------------------------------------------------------------
   样式原则：
     · 复用既有设计令牌（不引入第二套颜色系统）
     · Source Status / category 不表示安全结论：
       不使用绿色表达 AVAILABLE，也不表达 PASS / FAIL
     · 仅为 Snapshot 视图补充结构类，不重写其它模块样式
   ============================================================ */

.snap-detail {

    margin-top: 4px;

}

.snap-note {

    margin-top: 8px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}

.snap-selector-note {

    flex-basis: 100%;

    margin-top: 2px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* ---- A～K 页面结构总览（只做目录，不新增安全语义）---- */

.snap-overview {

    margin: 6px 0 2px;

    padding: 10px 12px;

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-panel);

}

.snap-overview__title {

    margin-bottom: 8px;

    font-size: 11px;

    letter-spacing: 0.06em;

    color: var(--text-dim);

}

.snap-overview__row {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 4px;

}

.snap-overview__arrow {

    color: var(--text-faint);

    font-size: 11px;

}

.snap-overview__tag {

    display: inline-flex;

    align-items: baseline;

    gap: 4px;

    padding: 1px 7px;

    border: 1px solid var(--border);

    border-radius: 3px;

    font-size: 11px;

    color: var(--text);

}

.snap-overview__letter {

    padding: 0 4px;

    border-radius: 2px;

    background: var(--bg-elevated);

    color: var(--accent);

    font-size: 10px;

    letter-spacing: 0.05em;

}

.snap-overview__label {

    color: var(--text-dim);

}


/* ---- A～K 区块首行的极简中文说明 ---- */

.snap-block-prompt {

    margin-bottom: 8px;

    font-size: 11px;

    line-height: 1.6;

    color: var(--text-dim);

}


/* ---- Snapshot Source 状态（中性；不表示安全结论）---- */

.snap-status {

    display: inline-block;

    padding: 1px 8px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-elevated);

    color: var(--text);

    font-size: 11px;

    letter-spacing: 0.04em;

}

.snap-status--unknown {

    color: var(--text-faint);

    border-style: dashed;

}


/* ---- Snapshot category（四类层级；不是安全结论）---- */

.snap-cat {

    display: inline-block;

    padding: 1px 7px;

    border: 1px solid var(--border);

    border-radius: 3px;

    font-size: 10px;

    letter-spacing: 0.06em;

    color: var(--text-dim);

}

.snap-cat--domain {

    color: var(--accent);

    border-color: var(--accent-dim);

}

.snap-cat--derived {

    color: var(--text);

}

.snap-cat--scenario {

    color: var(--warn);

}

.snap-cat--explanatory {

    color: var(--muted);

}

.snap-cat--unknown {

    color: var(--text-faint);

    border-style: dashed;

}


/* ---- Finding lifecycle timeline（原样序列）---- */

.snap-timeline {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

}

.snap-timeline__node {

    padding: 1px 8px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: var(--bg-elevated);

    color: var(--text);

    font-size: 11px;

}

.snap-timeline__arrow {

    color: var(--text-faint);

    font-size: 11px;

}


/* ---- Lifecycle Spine（Snapshot 事实链）---- */

.snap-spine {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

}

.snap-spine__node {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    padding: 5px 10px;

    border: 1px solid var(--border);

    border-radius: 3px;

    background: var(--bg-elevated);

    width: 100%;

}

.snap-spine__step {

    color: var(--text-faint);

    font-size: 10px;

    letter-spacing: 0.08em;

}

.snap-spine__label {

    min-width: 150px;

    color: var(--text);

    font-size: 12px;

}

.snap-spine__id {

    color: var(--text-dim);

    font-size: 11px;

}

.snap-spine__id.is-absent {

    color: var(--text-faint);

    font-style: italic;

}

.snap-spine__arrow {

    color: var(--text-faint);

    font-size: 11px;

    padding-left: 12px;

}


/* ---- 只读列表（non_equivalence 等原文条目）---- */

.snap-list {

    margin-top: 2px;

}

.snap-list__item {

    padding: 2px 0;

    border-bottom: 1px dotted #26323f;

    font-size: 11px;

    line-height: 1.7;

    color: var(--text-dim);

}


/* ---- 默认折叠区块（Real Write Paths；不是操作入口）---- */

.snap-fold {

    border: 1px dashed var(--border);

    border-radius: 4px;

    padding: 8px 10px;

    background: #0e141c;

}

.snap-fold__summary {

    cursor: pointer;

    font-size: 11px;

    color: var(--text-dim);

    letter-spacing: 0.04em;

}

.snap-fold__body {

    margin-top: 8px;

}


/* ---- id_namespace 原文条目 ---- */

.snap-ns {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.snap-ns__item {

    font-size: 11px;

    line-height: 1.6;

    color: var(--text-dim);

}


/* ---- 「未建模」值（NOT MODELED；不是失败结论）---- */

.snap-absent-value {

    display: inline-block;

    padding: 1px 8px;

    border: 1px dashed var(--border-strong);

    border-radius: 3px;

    color: var(--text-dim);

    font-size: 11px;

    letter-spacing: 0.06em;

}


/* ============================================================
   P2-06 · D-04-A · 教学实验（Start Run Boundary）
   ------------------------------------------------------------
   只新增「开始实验」动作入口的外观（按钮 + 禁用态 + 结果区）。
   全部复用既有令牌；不引入新颜色变量，也不建立第二套设计系统。
   ============================================================ */

.teaching-start {

    margin-top: 12px;

    padding-top: 10px;

    border-top: 1px dotted #1b2735;

}

.teaching-start__head {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}

.teaching-start__hint {

    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}

.teaching-start__button {

    margin-top: 8px;

    padding: 3px 12px;

    background: transparent;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    color: var(--text-dim);

    font-family: var(--mono);

    font-size: 11px;

    letter-spacing: 0.06em;

    cursor: pointer;

}

.teaching-start__button:hover {

    border-color: var(--accent-dim);

    color: var(--text);

}

.teaching-start__button:focus-visible {

    outline: 1px solid var(--accent-dim);

    outline-offset: 1px;

}

/* 请求进行中：禁用并弱化（防重复提交；不表达任何安全含义） */

.teaching-start__button:disabled {

    opacity: 0.5;

    color: var(--text-faint);

    cursor: progress;

}

.teaching-start__result {

    margin-top: 8px;

    font-size: 11px;

    line-height: 1.7;

    color: var(--text-dim);

}


/* ---- D-04-B · 当前实验运行（只读 Live 投影）---- */

.teaching-live {

    margin-top: 12px;

    padding-top: 10px;

    border-top: 1px dotted #1b2735;

}

/* 没有当前 Run 时不占视觉位置 */
.teaching-live.is-idle {

    display: none;

}

.teaching-live__head {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}

.teaching-live__hint {

    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}


/* P3-01-07 · Teaching Experiment 一级内容块
   复用 MCP / Trust 页面 .mcp-plane 的内容块视觉语言
   （bg-panel 底 + border-strong 实线边框 + 圆角 + 内边距 + 垂直间距），
   仅作用于 teaching-live 的直属 obj-detail__group（三个一级区域：
   这次实验的结果 / 本次运行 · N 个阶段 / 运行记录明细 · 事实转述）。
   运行记录明细内部模块、Run Ledger 13 行、HITL 面板均不受影响。 */
.teaching-live > .obj-detail__group {

    background: var(--bg-panel);

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    padding: 12px 14px;

    margin-top: 14px;

    margin-bottom: 0;

}

/* P3-01-07 · 一级区域标题层级
   只提高直属一级标题（11px / 700 / text-dim），
   内部二级模块标题保持 9px / text-faint，形成明确层级。 */
.teaching-live > .obj-detail__group > .obj-detail__group-title {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: var(--text-dim);

    margin-bottom: 8px;

}


/* ---- C02-T-02 · HITL 人工决定面板 ---- */

.teaching-live__hitl {

    margin-top: 10px;

    padding: 10px 12px;

    border: 1px solid #3a4a5c;

    border-radius: 6px;

    background: rgba(90, 120, 160, 0.06);

}

.teaching-live__hitl .obj-detail__hint {

    margin-top: 4px;

}

.teaching-live__hitl-actions {

    display: flex;

    gap: 10px;

    margin-top: 10px;

}

.teaching-live__hitl-actions .reject-button {

    background: var(--danger, #8a2f2f);

    border-color: var(--danger, #8a2f2f);

}

.teaching-live__hitl-actions .reject-button:hover {

    filter: brightness(1.15);

}

.obj-detail__hint.is-error {

    color: #e08f8f;

}


/* ---- D-04-C3 · 步骤观察（Live Observation · 只读快照）---- */

/* 静态快照：无动画 / 无进度条 / 无百分比 */
.step-obs {

    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px dotted #1b2735;

}

.step-obs__head {

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--text-faint);

}

.step-obs__notice {

    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}

.step-obs__state {

    margin-top: 6px;

    font-size: 11px;

    color: var(--text-dim);

}

.step-obs__timeline {

    margin-top: 8px;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}

.step-obs__item {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 2px 8px;

    border: 1px solid var(--border);

    border-radius: 3px;

    background: transparent;

}

.step-obs__name {

    font-family: var(--mono);

    font-size: 10px;

    color: var(--text-dim);

}

.step-obs__status {

    display: inline-block;

    padding: 1px 6px;

    border: 1px solid var(--border-strong);

    border-radius: 3px;

    background: transparent;

    font-size: 10px;

    color: var(--text-faint);

}

.step-obs__status.is-completed {

    color: var(--text);

}

.step-obs__status.is-failed {

    border-color: var(--warn);

    color: var(--warn);

}

.step-obs__status.is-in-progress {

    border-color: var(--accent-dim);

    color: var(--accent);

}

.step-obs__status.is-not-reached {

    border-style: dashed;

    color: var(--text-faint);

}

.step-obs__boundary {

    margin-top: 8px;

    padding: 8px 10px;

    border: 1px dotted var(--border-strong);

    border-radius: 3px;

    font-size: 10px;

    line-height: 1.7;

    color: var(--text-faint);

}