@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/* Agent Management UI —— SteeringFlow 品牌视觉层。
   设计语言与官网（steeringflow-website-v0.3）对齐：
   墨黑 #16161A · 珍珠金 #C9A24B · 纸白 #FAFAF8 · 细线 #E7E6E1 · Inter + Noto Sans SC。
   本文件只换视觉（令牌 + 组件样式），不改任何选择器契约（JS 依赖的 class / id 全部保留）。 */

:root {
  /* 品牌基础 */
  --bg: #FAFAF8;            /* 纸白 */
  --card: #FFFFFF;
  --border: #E7E6E1;        /* 细线 */
  --text: #16161A;          /* 墨黑 */
  --text-dim: #696969;
  --ink: #16161A;
  --ink-hover: #29292E;
  --gold: #C9A24B;          /* 珍珠金（点缀，不做大面积底色） */
  --gold-deep: #8A6A25;
  --gold-soft: #FBF6E9;
  --gold-line: #E7D9B4;

  /* 语义色（品牌化降噪，保留绿=成功 / 红=失败 的通用语义） */
  --primary: #16161A;       /* 主操作 = 墨黑（与官网 button-primary 一致） */
  --primary-dark: #29292E;
  --danger: #C0392B;
  --danger-soft: #FBEFEC;
  --success: #2F7D46;
  --ok-bg: #E9F2EA;
  --ok-fg: #2E5B33;
  --off-bg: #ECEBE6;
  --off-fg: #55555A;
  --err-bg: #FBEFEC;
  --err-fg: #8C2B2B;

  --radius: 10px;           /* 卡片 */
  --radius-sm: 6px;         /* 按钮 / 输入框 */
  --shadow-card: 0 1px 2px rgba(22, 22, 26, 0.04);
  --shadow-pop: 0 14px 40px rgba(22, 22, 26, 0.10);
}

* { box-sizing: border-box; }

::selection { background: #F3E8CC; color: var(--ink); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---------------- top bar（浅色编辑风：纸白 + 细线，与官网 header 同语言） ---------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 28px;
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* 顶栏品牌：舵形 logo + SteeringFlow（Flow 为金色，与官网 brand 一致）。
   整个品牌区域可点击 → 回 Flow Home（与右侧「Flow Home」链接一致的轻量行为，
   无 hover 底色——保持顶栏的干净排版）。 */
.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.topbar .brand-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.topbar h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.topbar h1 strong { color: var(--gold); font-weight: 700; }

.topbar-sub { font-size: 12px; color: var(--text-dim); letter-spacing: 0.02em; }

/* 顶栏导航（回 Flow Home 等页面级链接） */
.topbar-nav {
  font-size: 13px;
  font-weight: 500;
  color: #4D4D50;
  text-decoration: none;
}
.topbar-nav:hover { color: var(--ink); }
/* M7-AUI-8.2：顶栏统一为「Flow Home + 高级 + 账户」——由 .topbar-right 负责右对齐，
   因此其内部的链接不再各自 margin-left:auto。 */
.topbar-right .topbar-nav { margin-left: 0; }

/* ---------------- layout / card ---------------- */

.layout {
  max-width: 960px;
  margin: 32px auto 48px;
  padding: 0 20px;
}

/* M7-AUI-7 收口：Flow Home 是**操作界面**（Flow 图 + 原地展开的面板），
   内容宽度放宽以减少左右空白——只作用于 Flow Home，其它页面仍是 960。 */
.layout-wide { max-width: 1200px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px 28px;
  box-shadow: var(--shadow-card);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.card-head h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.card-head-actions { display: flex; gap: 8px; }

.runtime-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--err-fg);
  background: var(--err-bg);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------------- buttons（主操作 = 墨黑实底；次操作 = 细线描边） ---------------- */

.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-sm { padding: 4px 10px; font-size: 12px; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--ink-hover); }

.btn-ghost { border-color: var(--border); color: var(--text); background: #fff; }
.btn-ghost:hover { background: var(--bg); border-color: #D8D7D2; }

.btn-danger-ghost { border-color: var(--border); color: var(--danger); background: #fff; }
.btn-danger-ghost:hover { background: var(--danger-soft); border-color: #EAD3CE; }

.btn-success-ghost { border-color: var(--border); color: var(--success); background: #fff; }
.btn-success-ghost:hover { background: var(--ok-bg); border-color: #D8E6DA; }

/* ---------------- table（细线 + kicker 式表头） ---------------- */

.agent-table {
  width: 100%;
  border-collapse: collapse;
}

.agent-table th, .agent-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.agent-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.agent-table tbody tr { transition: background 0.12s ease; }
.agent-table tbody tr:hover { background: var(--bg); }

.cell-name { font-weight: 600; }

.col-actions { white-space: nowrap; text-align: right; }
.col-actions .btn { margin-left: 6px; }

.type-tag {
  display: inline-block;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, Monaco, monospace;
  background: var(--gold-soft);
  color: var(--gold-deep);
  border: 1px solid var(--gold-line);
  border-radius: 5px;
  padding: 1px 8px;
}

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
}

.badge-active { background: var(--ok-bg); color: var(--ok-fg); }
.badge-inactive { background: var(--off-bg); color: var(--off-fg); }
.badge-error { background: var(--err-bg); color: var(--err-fg); }
/* 11.9：Channel 管理态可含 disabled 等自由值（6.3），复用中性灰 */
.badge-disabled { background: var(--off-bg); color: var(--off-fg); }
/* M7-AUI-1：Advanced（工程管理面）标记——中性灰，明确「这里不是普通用户入口」 */
.badge-advanced { background: var(--off-bg); color: var(--off-fg); margin-left: 8px; }

.empty-hint {
  color: var(--text-dim);
  text-align: center;
  padding: 26px 0 8px;
  margin: 0;
}

/* ---------------- alerts ---------------- */

.alert {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  margin: 0 0 14px;
}

.alert-error {
  background: var(--err-bg);
  color: var(--err-fg);
  border: 1px solid #F0DAD6;
}

/* ---------------- form（焦点 = 墨线 + 金色光晕） ---------------- */

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.req { color: var(--danger); }

/* 所有字段类型同一盒模型：邮箱 / 密码 / 文本 / 下拉宽度一致（不再只覆盖 type=text） */
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { font-family: ui-monospace, "SF Mono", Consolas, Monaco, monospace; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.22);
}

.field input::placeholder, .field textarea::placeholder { color: #A8A7A2; }

.field-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ---------------- 13.4 Interaction Observability（语义化微调，全部复用既有变量） ---------------- */

/* 进行中 = 金色（品牌里的「ACTIVE ROUTE」语言），不再是默认蓝 */
.badge-processing { background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--gold-line); }
.badge-pending { background: var(--off-bg); color: var(--off-fg); }

.row-clickable { cursor: pointer; }

.stuck-note { font-size: 11px; color: var(--text-dim); }
.stuck-note.stuck { color: #B45309; font-weight: 600; }

.stuck-hint {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  margin: 0 0 14px;
  background: #FDF6E7;
  color: #8A5A12;
  border: 1px solid #F0E2C0;
}

.chip-label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
#detail-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 18px;
  margin: 0 0 16px;
}
.fact { display: flex; gap: 8px; font-size: 13px; }
.fact-label { color: var(--text-dim); min-width: 150px; flex-shrink: 0; }
.fact-value { word-break: break-all; }

/* 链接：墨色文字 + 金色下划线（官网 text-link 的语言） */
.link-id {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.link-id:hover { border-bottom-color: var(--ink); }

.payload-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--bg);
}
.payload-box summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.payload-pre {
  margin: 8px 0 2px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, Monaco, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}

.timeline-title { font-size: 14px; margin: 18px 0 10px; }
.timeline-item {
  border-left: 2px solid var(--border);
  padding: 6px 0 10px 14px;
  margin-bottom: 2px;
}
.timeline-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timeline-ts {
  font-size: 12px;
  color: var(--text-dim);
  font-family: ui-monospace, "SF Mono", Consolas, Monaco, monospace;
}
.timeline-message { font-size: 13px; margin-top: 4px; }
.timeline-meta {
  margin: 6px 0 0;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, Monaco, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
}

/* ---------------- Cloud-0.1.2.1 Workspace Entry ---------------- */

.signup-lead { margin: -6px 0 16px; }
#cta-connect-agent { text-decoration: none; display: inline-block; }

/* ---------------- Cloud-0.1.4.1 Connect Channel Golden Path ---------------- */

.webhook-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 16px 14px;
  margin: 6px 0 14px;
  background: var(--bg);
}

.webhook-url {
  font-family: ui-monospace, "SF Mono", Consolas, Monaco, monospace;
  font-size: 12px;
  word-break: break-all;
}

#cta-connect-channel { text-decoration: none; display: inline-block; }
.cta-row { display: flex; gap: 10px; margin-top: 20px; }

/* ---------------- Cloud-0.1.2.3.2 Connect Agent Golden Path ---------------- */

.step-title { font-size: 14px; margin: 20px 0 12px; }

.steps { list-style: none; margin: 0 0 14px; padding: 0; }

.step-item {
  font-size: 13px;
  padding: 7px 12px;
  border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0;
  background: var(--bg);
  margin-bottom: 6px;
}

.step-pending { border-left-color: var(--gold); color: var(--text-dim); }
.step-ok { border-left-color: var(--success); color: var(--ok-fg); font-weight: 600; }
.step-fail { border-left-color: var(--danger); color: var(--err-fg); font-weight: 600; }

/* ---------------- M5.2 Workspace Auth（Sign Up / Login 同页 toggle） ---------------- */

.auth-tabs { display: flex; gap: 8px; margin: 4px 0 18px; }

.auth-tab.active {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}

/* ---------------- M7-AUI-0 Entry UX（复用既有变量，仅收口入口） ---------------- */

/* 登录 / 创建账号的切换入口：行内文字按钮，不是一排 tab。 */
.auth-switch {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}

.btn-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--gold-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link:hover { color: var(--ink); }

/* 登录失败后才出现的一次性创建确认区。 */
.auth-offer {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 10px 14px 14px;
  margin-top: 16px;
}

/* ---------------- M7-AUI-0.2 Entry 视觉收口 ---------------- */

/* 入口卡片窄而居中：两字段表单不横向铺满整页。 */
#signup-section {
  max-width: 420px;
  margin: 48px auto;
  text-align: left;
}

/* 品牌时刻：入口卡片顶部的舵形标识 */
#signup-section .entry-mark {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
}

/* 层级：标题 > 字段 > 按钮 > 注册/登录链接 */
#entry-title { font-size: 18px; letter-spacing: -0.3px; }

#signup-section .card-head { justify-content: center; border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
#signup-section .field label { font-size: 13px; }

/* 表单控件统一高度（邮箱 / 密码 / 按钮同一节奏） */
#signup-section .field input,
#signup-section .btn {
  height: 40px;
}

#signup-section .field input { padding: 0 12px; }

/* 按钮尺寸统一：主按钮与次级按钮同一尺寸 */
#signup-section .btn {
  min-width: 120px;
  padding: 0 18px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#signup-section .form-actions { margin-top: 22px; }

#signup-section .auth-switch {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}

/* ---------------- M6.3 Flow Home / Unified Connect ---------------- */

/* ---------------- Flow Home 连接状态图（M7-AUI-2 / M7-AUI-3） ----------------
   节点轻、连接线突出——关系本身就是产品。
   线 = 该侧真实状态：灰 未连接 / 金 已准备 / 绿 已建立 Flow / 红 失败。
   （金色 = 品牌里的「ACTIVE ROUTE」语言，替代原先的默认蓝。） */

/* ---------------- Flow Home 布局节奏（M7-AUI-10.4 后的视觉收口） ---------------- */

/* 页面引导语：居中，与居中的状态图同轴 */
#home-lead { text-align: center; font-size: 14px; margin: -4px 0 0; }

.flow-graph {
  display: flex;
  align-items: flex-start;
  margin: 32px 0 6px;
}

/* 端点列改为纵向 flex + order 重排：图标 → 标签 → 状态 → 主按钮 → 选择器（最后）。
   选择器放最后 = 「编辑 / + 添加」按钮成为列的末尾元素，
   下方原 6px 间距即可直接生效（此前按钮下面还压着状态行 + 主按钮 ≈75px，
   那才是用户看到的大 gap 的真正来源）。 */
.flow-end {
  flex: 0 0 160px;
  min-width: 0;
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-end .flow-end-dot { order: 1; }
.flow-end .flow-node-kind { order: 2; }
.flow-end .flow-end-status { order: 3; }
.flow-end .flow-end-action { order: 4; }
.flow-end .flow-node-picker { order: 5; align-self: stretch; }

/* ---------------- 当前 Flow 选择器（M7-AUI-9） ----------------
   当前 Flow = 当前渠道 + 当前 Agent。选择器只负责「切换当前 Flow」，
   不是 Tab、不是渠道管理页；「+ 添加」在本页原地新建。 */
.flow-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  justify-content: center;
  margin-top: 14px;
}

.flow-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.flow-picker-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  white-space: nowrap;
}

.flow-picker select {
  max-width: 220px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
}

.flow-picker select:focus { outline: none; border-color: var(--primary); }
.flow-picker select:disabled { color: var(--text-dim); background: var(--bg); }
.flow-picker .btn { flex: 0 0 auto; white-space: nowrap; }

/* 节点内嵌选择器（M7-AUI-10.4）：「渠道 [▼] + 添加」住进节点卡片，
   选择器的值本身就是当前名称——节点不再重复显示名称文本。 */
.flow-node-picker {
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  align-items: stretch;
}

.flow-node-picker select {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.flow-node-picker .btn { align-self: center; }

/* 「编辑 / + 添加」并排一行，跟在选择器后面 */
.flow-node-picker-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 端点图形：与中心 logo 同尺寸（84px）、裸线性图形（无底、无环）。
   图标颜色恒为中性灰（不随状态变化）——状态只由「线」的颜色表达，
   让用户的注意力集中在连接线上，而不是被图标颜色吸引。 */
.flow-end-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 12px;
  color: #A8A7A2;
}

.flow-end-dot svg { width: 52px; height: 52px; display: block; }
.flow-end.is-off { opacity: 0.72; }

.flow-node-label, .flow-node-kind { font-size: 12px; letter-spacing: 0.06em; color: var(--text-dim); }
.flow-node-value { font-size: 15px; font-weight: 600; margin-top: 2px; word-break: break-all; }

/* 中心节点：品牌名首字母大写（不全大写），字号略高于两端标签以突出平台。 */
.flow-hub .flow-node-kind { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0; }

/* 节点内各元素的垂直节奏：状态行固定高度（两列的动作按钮因此水平对齐）。
   空状态行彻底折叠——paintSideStatus 清空文字时元素仍在 DOM，
   不折叠会凭空占位 28px，把「标签 → 选择器」的间距撑大。 */
.flow-end-status { min-height: 20px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.flow-end-status:empty { min-height: 0; margin-top: 0; }
.flow-end-status.is-ok { color: var(--ok-fg); font-weight: 600; }
.flow-end-status.is-busy { color: var(--gold-deep); }
.flow-end-status.is-bad { color: var(--err-fg); font-weight: 600; }

/* 间距挂在按钮上而非容器上：JS 隐藏主按钮时（如渠道已连接）容器为空，
   容器自身的 margin 仍会占位、把选择器往下推——挂到按钮上则随按钮一起消失。 */
.flow-end-action { margin-top: 0; }
.flow-end-action > .btn { margin-top: 10px; }

/* 端点主 CTA（连接渠道 / 连接 Agent）：标准按钮尺寸 + 统一最小宽度，
   不再用 btn-sm 的小尺寸——它是这一侧的核心动作 */
.flow-end-action .btn.btn-sm {
  padding: 8px 18px;
  font-size: 13px;
  min-width: 128px;
}

/* 节点内选择器：轻量、居中，不与状态行抢视觉 */
.flow-node-picker { gap: 5px; margin-top: 8px; }
.flow-node-picker select {
  padding: 6px 8px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
}
.flow-node-picker-actions .btn { font-size: 12px; }

/* 底部 CTA 区：与面板用细线分区、整体居中——「把它们连接起来」是页面的最终动作 */
#home-section > .form-actions {
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

#home-section > .form-actions .btn { height: 40px; padding: 0 22px; font-size: 14px; }
#home-section > .form-actions #cta-primary-hint { flex-basis: 100%; text-align: center; margin: 0; }

/* 页面标题比普通卡片标题略大（Flow Home 是主操作页） */
#home-title { font-size: 18px; letter-spacing: -0.2px; }

/* 「查看 / 更换」= 展开/收起该侧面板：箭头提示「点了会展开」，展开时转向下。
   箭头由 CSS 画在按钮上，按钮文字本身不带箭头字符（文字契约不变）。 */
.btn-disclosure::after {
  content: "›";
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.15s ease;
}

.btn-disclosure.is-open::after { transform: rotate(90deg); }

/* 连接线：2px 细线**直连两端图标**（无端点圆点、无箭头）。
   容器高度 = 图标直径（84px），线在容器垂直居中 → 与两侧图标圆心同高。 */
.flow-link {
  flex: 1 1 auto;
  min-width: 36px;
  height: 84px;
  display: flex;
  align-items: center;
}

.flow-link-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--off-bg);
  transition: background 0.18s ease;
}

.flow-link.is-ready .flow-link-line { background: var(--gold-line); }
.flow-link.is-on .flow-link-line { background: var(--success); }
.flow-link.is-error .flow-link-line { background: var(--danger); }

/* 中心节点：平台 logo 本体（裸图形，无环无底），文字在图形下方。
   logo 与两端图标一样恒为中性灰——状态只由「线」表达，三个图形都不抢注意力。 */
.flow-hub {
  flex: 0 0 160px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.flow-hub-mark {
  width: 84px;
  height: 84px;
  display: block;
  margin: 0 auto 12px; /* 与 .flow-end-dot 的下间距一致：三列文字落在同一水平线上 */
  filter: grayscale(100%);
  opacity: 0.62;
}

.flow-hub.is-off .flow-hub-mark { opacity: 0.4; }

/* Flow 级结果（第一条消息 / 自检通路说明）：紧贴 Flow，居中；
   没有内容时完全塌陷，不占弹窗上方的空隙 */
.flow-detail { text-align: center; min-height: 18px; margin: 4px 0 0; }
.flow-detail:empty { min-height: 0; margin: 0; }

/* 原地展开：哪一端展开就长在那一端下面（不跳页、不铺两个大表单） */
/* 原地展开：哪一端展开就长在那一端下面（不跳页、不铺两个大表单）
   ——与上方按钮只留小间隙，看起来是「就地长出来」的，不是独立区块 */
.flow-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 6px;
}

/* 面板长在**它自己的那一端**下面（不横跨整页——表单不需要那么宽）：
   宽度不够的问题由「加宽标签列」解决，不靠把面板拉满。 */
#panel-channel { grid-column: 1; }
#panel-agent { grid-column: 2; }

/* 面板 = 统一的「标签列 | 控件列」表单（结构契约不变，仅视觉品牌化）。 */
.flow-panel {
  display: grid;
  /* 标签列 = 最长标签（`WorkBuddy Agent ID *`，实测文字宽 135px）留一点余量即可，
     剩下宽度全给控件列——这正是「Redirect URI + 复制」能一行的前提。 */
  grid-template-columns: 156px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 16px 18px;
}

/* 字段容器「透明」：label / 控件 / 提示直接进入面板网格。
   （`.hidden` 仍能整体隐藏这些块——下面的规则只在**可见**时生效。） */
.flow-panel .field { display: contents; }
.flow-panel #pc-bot-block:not(.hidden),
.flow-panel #pa-wb-block:not(.hidden) { display: contents; }

.panel-title { grid-column: 1; font-size: 14px; margin: 0; }

/* 标签（含标题）永远一行显示：**放宽标签列，而不是把 `*` 折到下一行** */
.flow-panel label,
.panel-title { white-space: nowrap; }

/* 每一组：标签在左列；控件、提示、错误、动作都在右列（同一行的右半边） */
.flow-panel label { grid-column: 1; }
.flow-panel input,
.flow-panel select,
.flow-panel .copy-row,
.flow-panel .field-hint,
.flow-panel .alert,
.flow-panel .form-actions,
.flow-panel .pa-guide { grid-column: 2; }

/* 空提示不占行（否则会在网格里留下一行空隙） */
.flow-panel .field-hint:empty { display: none; }

/* Redirect URI 那一组：地址框与「复制」按钮**必须同一行**。
   地址框可收缩（长域名在框内折行），按钮不收缩、绝不换行。 */
.flow-panel .copy-row { flex-wrap: nowrap; }
.flow-panel .copy-row .copy-value { flex: 1 1 auto; min-width: 0; }
.flow-panel .copy-row .btn { flex: 0 0 auto; }

@media (max-width: 720px) {
  .topbar { padding: 0 18px; }
  /* 窄屏纵向堆叠：图标在上、文字在下，连接线变为居中的 2px 竖线（仍直连图标） */
  .flow-graph { flex-direction: column; align-items: center; }
  .flow-end { flex: 0 0 auto; width: 100%; }
  .flow-link { flex: 0 0 44px; height: auto; width: auto; display: flex; justify-content: center; }
  .flow-link-line { width: 2px; height: 100%; }
  .flow-panels { grid-template-columns: 1fr; }
  /* 窄屏回退：一行放不下「标签 | 控件」两列，回到「标签在上、控件在下」的纵向堆叠 */
  .flow-panel { display: block; }
  .flow-panel .field { display: block; }
  .flow-panel #pc-bot-block:not(.hidden),
  .flow-panel #pa-wb-block:not(.hidden) { display: block; }
  .panel-title { margin: 0 0 10px; }
}

.stepper { display: flex; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; }

.step-chip {
  font-size: 12px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  background: #fff;
}
.step-chip.active { border-color: var(--gold); color: var(--gold-deep); font-weight: 600; background: var(--gold-soft); }
.step-chip.done { border-color: var(--success); color: var(--ok-fg); }
/* M7-AUI-1-Correction：区域入口 chip 可点击跳转（它只是入口，不是步骤锁） */
.step-chip { cursor: pointer; }
.step-chip:hover { border-color: var(--gold); color: var(--gold-deep); }

.info-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--bg);
  margin: 0 0 14px;
  font-size: 13px;
}

/* ---------------- M7-AUI-8.2 顶部导航：统一为「Flow Home + 高级 + 账户」 ----------------
   只有一套实现（.nav-menu 浮层），全部页面共用同一段结构——
   不再维护七份可能漂移的清单，也没有第二套 .nav-advanced 折叠。
   浮层 = 白底细线（原深灰底改为品牌浅色浮层）。 */

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-menu { position: relative; }

.nav-menu > summary {
  cursor: pointer;
  color: #4D4D50;
  font-size: 13px;
  font-weight: 500;
  list-style: none;
}
.nav-menu > summary:hover { color: var(--ink); }
.nav-menu > summary::-webkit-details-marker { display: none; }
/* 「高级 ▾」：箭头由 CSS 画，不进入菜单文案。 */
.nav-menu > summary::after { content: " ▾"; }

/* 未展开时彻底不渲染（不依赖 UA 对 closed details 的差异实现） */
.nav-menu:not([open]) .nav-menu-panel { display: none; }

.nav-menu-panel {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: var(--shadow-pop);
}

.nav-menu-panel a {
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  padding: 7px 14px;
}
.nav-menu-panel a:hover { background: var(--bg); }

/* 菜单分组标题（接入配置 / 运行与排障 / 成员）：按用户任务分层，
   而不是把 Control Plane 的实体名罗列成菜单。 */
.nav-menu-group {
  margin: 6px 0 2px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A8A7A2;
}
.nav-menu-group:first-child { margin-top: 0; }

/* ---------------- M7-AUI-8.2：先进错误展示（用户语言 + 技术详情折叠） ----------------
   默认只说「无法加载 / 无法保存」这类可行动的用户语言；
   原始 HTTP / 字段路径 / 后端 detail 收进 [查看详细信息]，不删除、不隐藏事实。 */

.error-detail { margin-top: 8px; }

.error-detail > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
}

.error-detail-body {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 220px;
  overflow: auto;
}

/* ---------------- M7-AUI-8.2：高级字段折叠（能力保留，默认不展开） ---------------- */

.field-collapse {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
  background: var(--bg);
}

.field-collapse > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.field-collapse-body { padding-top: 10px; }

/* ---------------- M7-WB：WorkBuddy 重定向 URI 复制行 ---------------- */

.copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.copy-value {
  flex: 1 1 260px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--bg);
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Consolas, Monaco, monospace;
  word-break: break-all;
}

/* ---------------- M7-AUI-7：WorkBuddy 自助接入指引（默认折叠） ---------------- */

.pa-guide {
  margin: 14px 0 2px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.pa-guide > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--gold-deep);
  list-style: none;
}
.pa-guide > summary:hover { color: var(--ink); }
.pa-guide > summary::-webkit-details-marker { display: none; }
.pa-guide > summary::before { content: "▸ "; }
.pa-guide[open] > summary::before { content: "▾ "; }

/* 折叠时彻底不渲染（不依赖 UA 对 closed details 的差异实现） */
.pa-guide:not([open]) .pa-guide-body { display: none; }

.pa-guide-body { padding-top: 4px; }

.pa-guide-item {
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 2px;
}

.pa-guide-body .field-hint { margin: 0; }

/* ---------------- Early Access 帮助 / 反馈入口（最小产品面新增） ----------------
   只在 Flow Home 底部展示：Need help? + 反馈邮箱。不建 Help Center / 工单系统，
   只是一个 mailto 入口；文案限定 Help / Feedback / Early Access（不用 Support / SLA 措辞）。
   视觉沿用既有令牌（纸白 + 细线 + 珍珠金），不引入新组件体系。 */

.page-footer {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 18px 20px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
}

.footer-help {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-help-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.footer-help-line { margin: 0; }

.footer-mail {
  color: var(--gold-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 1px;
}
.footer-mail:hover { color: var(--ink); border-bottom-color: var(--ink); }

.footer-note { margin: 0; letter-spacing: 0.06em; white-space: nowrap; }