/* ============================================================
   WeAgent 官网 — 运营透视（Observability）页专属样式
   依赖 shared.css 的 token；纯静态，无新品牌色
   ============================================================ */

/* ---------- 页内英雄（自包含，与其它子页一致） ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(64px,9vw,116px) 0 clamp(48px,6vw,80px); }
.page-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.page-hero .h-display { margin: 22px 0 20px; }
.page-hero .lead { max-width: 800px; }
.page-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.page-hero-meta .pill { background: rgba(255,255,255,.06); border: 1px solid var(--ink-hair); color: var(--on-deep-2); }
.page-hero-meta .pill[data-lang-en] { display: none; }
html[lang="en"] .page-hero-meta .pill[data-lang-zh] { display: none; }
html[lang="en"] .page-hero-meta .pill[data-lang-en] { display: inline-flex; }

/* ---------- 章节小标题（与 trust.css 同款） ---------- */
.s-head { max-width: 860px; margin-bottom: 44px; }
.s-head .h-section { margin: 16px 0 14px; }
.section-deep .s-head .eyebrow { color: var(--brand-2); }

/* ---------- 层级引导小标（每层开头的层号 + 主题） ---------- */
.layer-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.layer-no { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--brand); letter-spacing: .04em; }
.section-deep .layer-no { color: var(--brand-2); }

/* ===== 以下组件样式由 Task 3 / 4 / 5 追加到文件末尾 ===== */

/* ===================== 第 1 层：决策回放 ===================== */
/* 仿真运营台截面 */
.sim-console { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.sim-top { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: var(--card-2); border-bottom: 1px solid var(--hair); }
.sim-top .sim-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--hair-strong); }
.sim-top .sim-dot:nth-child(1) { background: var(--blocked); } .sim-top .sim-dot:nth-child(2) { background: var(--held); } .sim-top .sim-dot:nth-child(3) { background: var(--running); }
.sim-title { margin-left: 10px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.sim-title[data-lang-en] { display: none; }
html[lang="en"] .sim-title[data-lang-zh] { display: none; }
html[lang="en"] .sim-title[data-lang-en] { display: inline; }
.sim-badge { margin-left: auto; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.sim-badge.ok { color: var(--running); background: rgba(48,209,88,.14); }
.sim-badge[data-lang-en] { display: none; }
html[lang="en"] .sim-badge[data-lang-zh] { display: none; }
html[lang="en"] .sim-badge[data-lang-en] { display: inline-block; }
.sim-body { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 22px; }
.sim-step { position: relative; display: flex; gap: 12px; padding: 16px; background: var(--card-2); border: 1px solid var(--hair); border-radius: var(--r-md); }
.sim-step .sim-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; }
.sim-step .sim-ic svg { width: 17px; height: 17px; }
.sim-step.done .sim-ic { background: rgba(48,209,88,.14); color: var(--running); }
.sim-step.warn .sim-ic { background: rgba(255,159,10,.14); color: var(--held); }
.sim-step .sim-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sim-step .sim-txt b { font-size: 14.5px; font-weight: 700; color: var(--ink-1); }
.sim-step .sim-txt b[data-lang-en] { display: none; }
html[lang="en"] .sim-step .sim-txt b[data-lang-zh] { display: none; }
html[lang="en"] .sim-step .sim-txt b[data-lang-en] { display: block; }
.sim-step .sim-txt span { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.sim-foot { padding: 16px 22px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
/* 通用卡片网格（第 1、2 层共用） */
.obs-grid { display: grid; gap: var(--gap); }
.obs-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.obs-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.obs-card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.obs-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(94,92,230,.28); }
.obs-card .obs-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 15px; background: var(--fill-brand); color: var(--brand); }
.obs-card .obs-ic svg { width: 23px; height: 23px; }
.obs-card h4 { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 9px; }
.obs-card p { font-size: 14px; color: var(--ink-2); line-height: 1.65; }
@media (max-width: 980px) {
  .sim-body { grid-template-columns: 1fr 1fr; }
  .obs-grid.cols-2, .obs-grid.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sim-body { grid-template-columns: 1fr; }
}

/* ===================== 第 2 层：画像演化 ===================== */
/* 三层可信度 */
.cred-tiers { display: flex; flex-direction: column; gap: 14px; }
.cred-row { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: center; background: var(--card); border: 1px solid var(--hair); border-left-width: 4px; border-radius: var(--r-lg); padding: 24px 28px; transition: transform .2s; }
.cred-row:hover { transform: translateX(4px); }
.cred-row.is-human { border-left-color: var(--blocked); }
.cred-row.is-confirmed { border-left-color: var(--ai); }
.cred-row.is-observed { border-left-color: var(--ink-3); }
.cred-rank { display: grid; place-items: center; width: 92px; height: 56px; border-radius: var(--r-md); font-size: 17px; font-weight: 800; }
.cred-row.is-human .cred-rank { background: rgba(255,69,58,.1); color: var(--blocked-ink); }
.cred-row.is-confirmed .cred-rank { background: var(--fill-ai); color: var(--ai-ink); }
.cred-row.is-observed .cred-rank { background: var(--card-2); color: var(--ink-3); }
.cred-rank span[data-lang-en] { display: none; }
html[lang="en"] .cred-rank span[data-lang-zh] { display: none; }
html[lang="en"] .cred-rank span[data-lang-en] { display: block; }
.cred-main h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cred-main p { font-size: 13.8px; color: var(--ink-2); line-height: 1.6; margin-bottom: 10px; }
.cred-main p b { color: var(--ink-1); }
.cred-flag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.cred-flag.drive { color: var(--ai-ink); background: var(--fill-ai); }
.cred-flag.norec { color: var(--ink-3); background: var(--card-2); border: 1px solid var(--hair); }
.cred-flag[data-lang-en] { display: none; }
html[lang="en"] .cred-flag[data-lang-zh] { display: none; }
html[lang="en"] .cred-flag[data-lang-en] { display: inline-flex; }
.obs-grid.cols-1 { grid-template-columns: 1fr; }
.obs-card.is-wide { display: block; }
/* 健康度仪表 */
.health-band { background: var(--card-2); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: clamp(24px,3vw,34px); }
.health-head { max-width: 760px; margin-bottom: 22px; }
.health-head h3 { font-size: clamp(19px,2.2vw,24px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.health-head p { font-size: 14px; color: var(--ink-2); line-height: 1.65; }
.health-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 12px; }
.health-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 18px 10px; text-align: center; }
.health-cell .hc-num { font-family: var(--mono); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.health-cell.good .hc-num { color: var(--ai-ink); }
.health-cell.warn .hc-num { color: var(--held-ink); }
.health-cell .hc-lbl { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.health-cell .hc-lbl[data-lang-en] { display: none; }
html[lang="en"] .health-cell .hc-lbl[data-lang-zh] { display: none; }
html[lang="en"] .health-cell .hc-lbl[data-lang-en] { display: block; }
@media (max-width: 980px) {
  .cred-row { grid-template-columns: 1fr; gap: 14px; }
  .cred-rank { width: auto; justify-self: start; padding: 0 18px; }
  .health-grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 600px) {
  .health-grid { grid-template-columns: repeat(2,1fr); }
}

/* ===================== 第 3 层：系统态势（深色区） ===================== */
.sys-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.sys-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--ink-hair); border-radius: var(--r-lg); padding: 26px; transition: transform .25s, border-color .25s, background .25s; }
.sys-card:hover { transform: translateY(-4px); border-color: rgba(124,107,255,.4); background: linear-gradient(180deg, rgba(124,107,255,.1), rgba(255,255,255,.02)); }
.sys-card .sys-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 15px; background: linear-gradient(135deg, rgba(94,92,230,.25), rgba(10,132,255,.18)); border: 1px solid rgba(124,107,255,.35); color: #C9C5FF; }
.sys-card .sys-ic svg { width: 23px; height: 23px; }
.sys-card h4 { font-size: 17px; font-weight: 700; color: var(--on-deep-1); margin-bottom: 9px; }
.sys-card p { font-size: 13.8px; color: var(--on-deep-2); line-height: 1.62; }
.sys-card p b { color: #C9C5FF; font-weight: 700; }
@media (max-width: 980px) {
  .sys-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sys-grid { grid-template-columns: 1fr; }
}

/* ===================== 第 4 层：看懂 AI 的分寸 ===================== */
/* 名片引荐卡的「可选 · 默认关」徽标 */
.opt-pill { display: inline-flex; align-items: center; margin-top: 14px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; color: var(--held-ink); background: rgba(255,159,10,.12); border: 1px solid rgba(255,159,10,.28); }
.opt-pill[data-lang-en] { display: none; }
html[lang="en"] .opt-pill[data-lang-zh] { display: none; }
html[lang="en"] .opt-pill[data-lang-en] { display: inline-flex; }