:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  /* --space-10 被 .catalog-page / .public-asset-page 的 padding 简写引用，
     但此前从未定义。var() 无回退值时整条 padding 声明在计算阶段失效，
     两个公开页面因此连上内边距一起丢失。按 4px 基准补齐这一档。 */
  --space-10: 64px;
  --content-gutter-wide: calc(var(--space-1) * 10);
  --content-gutter-medium: var(--space-6);
  --content-gutter-compact: var(--space-4);
  --panel-padding: var(--space-6);
  --panel-padding-compact: var(--space-4);
  --body-leading: 1.65;
  --meta-leading: 1.5;
  --gray-50: #fafafa;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  /* gray-400/500 仅用于文字（已核对：无边框或填充引用）。
     取值按 WCAG AA 4.5:1 反解，最差底色为 --surface-tech #f1f5f9：
     #64748b on #f1f5f9 只有 4.34，故次级文字压到 #5b6b7f（4.76）。
     --gray-400 承担元信息与占位，同样按最差底色反解到 #64748b。 */
  --gray-400: #64748b;
  --gray-500: #5b6b7f;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  /* 排版层级：--text-micro 只用于徽章/角标，说明性文字下限为 --text-xs 13px。
     原先 xs=12px 承担了 98 处引用，导致过半正文与徽章同号、层级塌陷。 */
  --text-micro: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 16px;
  --text-xl: 19px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --page-max-width: 1360px;
  --page-narrow-width: 1120px;
  --page-wizard-width: 980px;
  /* ============================================================
     现代极简主义（docs/design-system.zh-CN.md）
     色彩焦点：近乎单色的温暖灰白画布 + 单一电光蓝双色强调渐变。
     强调色出现次数克制，但每次出现都掌控注意力。
     ============================================================ */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-soft: var(--gray-50);
  --surface-tech: var(--gray-100);
  /* 反转对比区块：深石板色既是主文字色，也是深色区块的背景。
     这是「反转区块」技巧的基础——同一个令牌承担两种角色。 */
  --sidebar: #0f172a;
  --sidebar-soft: #1b2439;
  --sidebar-border: #24304a;
  --sidebar-width: 248px;
  --topbar-height: 64px;
  --sidebar-line: rgba(226, 232, 240, 0.12);
  --sidebar-text: #cbd5e1;
  /* 深色区块上需要提亮而非压暗：#94a3b8 on #0f172a = 5.94 */
  --sidebar-text-muted: #94a3b8;
  --sidebar-text-strong: #ffffff;
  --sidebar-agent: #93b4ff;
  --text: #0f172a;
  --ink: #0f172a;
  --muted: var(--gray-500);
  --muted-soft: var(--gray-400);
  --line: #e2e8f0;
  --line-strong: var(--gray-300);
  /* 电光蓝：主操作色。#0052ff on #fff = 5.06，达 AA。 */
  --primary: #0052ff;
  --primary-strong: #0041cc;
  --primary-soft: #eef3ff;
  --primary-border: #a8c0ff;
  /* 渐变终点。--accent / --accent-secondary 是设计系统的命名，
     与 --primary 并存以便渐变声明读起来贴合文档。 */
  --accent: #0052ff;
  --accent-secondary: #4d7cff;
  --accent-foreground: #ffffff;
  /* 标志性渐变：这套设计系统的心跳。集中定义，避免散落的字面量。
     此档为文档原值，用于「上面不承载文字」的场合：渐变文字（bg-clip 时
     渐变本身就是字色）、渐变描边、标题下划线条、tab 下划线。 */
  --gradient-accent: linear-gradient(to right, var(--accent), var(--accent-secondary));
  --gradient-accent-diagonal: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  /* 承载白字的渐变需要更暗的终点。
     文档只核验了「白底上的 #0052FF」，没有核验「#4D7CFF 上的白字」——
     后者只有 3.72:1，低于 AA。实测白字在原渐变 61% 之后即跌破 4.5:1，
     也就是主按钮右侧约四成面积上的文字不达标。
     故终点收到 #3b68d9（白字 5.04:1），全程 >= 5.0，
     仍是同一族双色电光蓝渐变，肉眼几乎看不出差别。 */
  --accent-secondary-strong: #3b68d9;
  --gradient-accent-surface: linear-gradient(to right, var(--accent), var(--accent-secondary-strong));
  --gradient-accent-surface-diagonal: linear-gradient(135deg, var(--accent), var(--accent-secondary-strong));
  /* 主色的低透明度描边变体。 */
  --primary-line-strong: rgba(0, 82, 255, .55);
  --primary-line: rgba(0, 82, 255, .28);
  --primary-line-soft: rgba(0, 82, 255, .18);
  --primary-line-faint: rgba(0, 82, 255, .12);
  --interaction: var(--primary);
  --interaction-strong: var(--primary-strong);
  --interaction-soft: var(--primary-soft);
  --interaction-border: var(--primary-border);
  --interaction-ring: rgba(0, 82, 255, .14);
  /* 键盘焦点专用：焦点环与强调色一致（设计系统「焦点状态」一节） */
  --focus-ring: #0052ff;
  --focus-ring-halo: #ffffff;
  --interaction-dark-soft: rgba(0, 82, 255, .24);
  /* 选中项图标叠在 --interaction-dark-soft 高亮条上，需更亮才达 AA */
  --sidebar-interaction: #a8c4ff;
  --agent: #0052ff;
  --agent-strong: #0041cc;
  --agent-soft: #eef3ff;
  --agent-border: #a8c0ff;
  --info: #0052ff;
  --info-strong: #0041cc;
  --info-soft: #eef3ff;
  --info-border: #bcd0ff;
  --warning: #b45309;
  --warning-strong: #92400e;
  --warning-soft: #fef6e7;
  --warning-border: #f0d4a4;
  --danger: #dc2626;
  --danger-strong: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-border: #f1b6b1;
  /* 状态色主要用于徽章文字，取值保证在各自 -soft 底色上达到 AA 4.5:1。 */
  --success: var(--brand);
  --success-strong: var(--brand-strong);
  --success-soft: #ecfdf5;
  --success-border: #a7d8c2;
  --neutral-status: #64748b;
  --neutral-status-soft: #f1f5f9;
  --tech-grid: rgba(15, 23, 42, 0.04);
  /* 语义色分工（设计系统「色彩策略」）：
     强调色 --accent 独占「主行动 / 链接 / 高亮 / 选中」，是唯一的彩色声音；
     绿 / 橙 / 红只表达真实状态（通过 / 待办 / 失败），不参与视觉修饰。
     --brand 保留为「已完成 / 一切正常」的状态绿，不再是品牌主色。 */
  --brand: #0f766e;
  --brand-strong: #0b5f59;
  --brand-soft: #ecfdf5;
  --brand-border: #a6d3cd;
  --brand-line: rgba(15, 118, 110, .28);
  --brand-line-soft: rgba(15, 118, 110, .16);
  /* 圆角：控件 12px（rounded-xl），卡片 16px（rounded-2xl）。
     设计系统的圆角比此前的 8px/12px 明显更松，是「当代」气质的一部分。 */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  /* 分层阴影系统（设计系统「边框、表面与阴影」）。
     卡片不只用一层阴影，而是用细腻、扩散的阴影创造真实深度。 */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-card: 0 4px 6px rgba(15, 23, 42, .07);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, .08);
  --shadow-xl: 0 20px 25px rgba(15, 23, 42, .1);
  /* 带强调色的抬升：主按钮与精选元素专用，让蓝色「发光」。 */
  --shadow-accent: 0 4px 14px rgba(0, 82, 255, .25);
  --shadow-accent-lg: 0 8px 24px rgba(0, 82, 255, .35);
  --shadow-float: 0 20px 25px rgba(15, 23, 42, .12), 0 8px 10px rgba(15, 23, 42, .04);
  /* 双字体排印系统。
     展示字体 Calistoga 无中文字形，而本站标题全部为中文——
     若只写 "Calistoga", Georgia, serif，中文会静默回落到无衬线，
     「温暖有性格的衬线标题」这一层身份就完全丢失。
     故补一档 CJK 衬线（宋体系）承接中文，让中文标题也拿到衬线声音。 */
  --font-display: "Calistoga", Georgia, "Songti SC", "SimSun", "Source Han Serif SC", "Noto Serif SC", "Songti TC", serif;
  --font-body: "Inter", system-ui, "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", "Bahnschrift", "Inter", "Segoe UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  --font-code: "JetBrains Mono", Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  --font-sans: var(--font-body);
  --font-mono: var(--font-code);
  /* 动效（设计系统「效果与动画」）：流畅、自信、目标明确。 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 200ms var(--ease-out);
  --transition-lift: 300ms var(--ease-out);
}

[hidden] { display: none !important; }

/* Institution, asset, and notification components */
.organization-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.organization-profile, .organization-members { padding: var(--space-6); }
.certification-badge { padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: 999px; color: var(--neutral-status); background: var(--neutral-status-soft); }
.certification-badge[data-status="verified"] { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.certification-badge[data-status="pending"] { color: var(--warning-strong); border-color: var(--warning-border); background: var(--warning-soft); }
.certification-badge[data-status="suspended"] { color: var(--danger); border-color: var(--danger-border); background: var(--danger-soft); }
.member-toolbar { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(420px, 1.3fr); gap: var(--space-3); margin-bottom: 18px; }
.member-toolbar form { display: grid; grid-template-columns: 1fr 160px auto; gap: var(--space-2); }
.organization-function-nav { display: flex; gap: var(--space-2); margin: 0 auto var(--space-5); padding: var(--space-1); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.organization-function-nav button { flex: 0 0 auto; min-height: 42px; padding: 0 var(--space-4); border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--muted); font-weight: 700; white-space: nowrap; }
.organization-function-nav button:hover { background: var(--surface); color: var(--text); }
.organization-function-nav button.active { background: var(--surface); color: var(--interaction-strong); box-shadow: var(--shadow-sm); }
.organization-function-section { grid-column: 1 / -1; }
.organization-records-layout { display: grid; gap: var(--space-4); }
.organization-record-filter { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)) auto; gap: var(--space-3); align-items: end; padding: 0 var(--space-5) var(--space-5); }
.organization-record-filter label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.organization-record-list { display: grid; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }
.organization-record-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.organization-record-item > div { display: grid; gap: var(--space-1); }
.organization-record-item small, .organization-record-item time { color: var(--muted); font-size: var(--text-xs); }
.organization-homepage-preview { padding: var(--space-6); }
.organization-preview-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: var(--space-6); align-items: start; }
.organization-preview-hero h2 { margin: var(--space-2) 0; font-size: var(--text-2xl); }
.organization-preview-hero > div > p:not(.section-kicker) { color: var(--muted); line-height: 1.75; }
.organization-preview-hero .row-actions { margin-top: var(--space-5); }
.organization-preview-hero aside { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.organization-preview-hero dl { display: grid; gap: var(--space-3); }
.organization-preview-hero dt { color: var(--muted); font-size: var(--text-xs); }
.organization-preview-hero dd { margin-top: var(--space-1); overflow-wrap: anywhere; font-size: var(--text-sm); }
.member-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.member-table-head, .member-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1fr) 180px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); }
.member-table-head { color: var(--muted); font-size: 12px; font-weight: 700; background: var(--gray-50); }
.member-row + .member-row { border-top: 1px solid var(--line); }
.member-row > span:first-child { display: grid; gap: var(--space-1); }
.member-row small { color: var(--muted); }
.upload-progress { margin-top: 12px; padding: var(--space-3) var(--space-4); border: 1px solid var(--primary-border); border-radius: var(--radius); background: var(--primary-soft); color: var(--accent); font-weight: 700; }
.demo-file-status.uploading { color: var(--accent); }
.demo-file-status.uploaded { color: var(--accent); }
.demo-file-status.failed { color: var(--danger); }
.file-list { padding: var(--space-5); }
.asset-history-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-4); margin-top: 18px; }
.version-timeline { padding: var(--space-5); }
.file-summary-row, .timeline-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.file-summary-row:first-of-type, .timeline-item:first-of-type { border-top: 0; }
.file-summary-row > span:nth-child(2), .timeline-item > div { display: grid; gap: var(--space-1); min-width: 0; }
.file-summary-row small, .timeline-item small { color: var(--muted); }
.file-summary-row code { max-width: 110px; overflow: hidden; color: var(--muted); }
.repository-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; }
.repository-file-row > button:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.danger-text { color: var(--danger); }
.hash-value { overflow-wrap: anywhere; font-family: var(--font-code); font-size: 12px; }
.public-file-list { display: grid; gap: var(--space-3); }
.public-file-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); }
.public-file-item > div:first-child { display: grid; gap: var(--space-1); min-width: 0; }
.public-file-item:hover { border-color: var(--primary); }
.public-file-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.public-file-actions a { color: var(--primary-strong); font-size: 13px; font-weight: 700; text-decoration: none; }
.public-file-list span { color: var(--muted); font-size: 13px; }
.file-detail-actions { display: flex; gap: var(--space-3); padding: 0 var(--space-5); }
.catalog-toolbar { grid-template-columns: minmax(220px, 1fr) 190px 160px auto auto; }
.catalog-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: 24px; }
.catalog-pagination button { min-width: 88px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: white; cursor: pointer; }
.catalog-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.notification-center { position: relative; }
.notification-count { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: 9px; background: var(--danger); color: white; font-size: var(--text-micro); line-height: 18px; text-align: center; }
.notification-popover { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: min(380px, calc(100vw - 32px)); max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 18px 45px rgba(16, 24, 40, .16); }
.notification-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--line); background: white; }
.notification-list { display: grid; }
.notification-item { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.notification-item.unread { background: var(--primary-soft); }
.notification-item span { color: var(--muted); font-size: var(--text-xs); }
.notification-item small { color: var(--muted); font-size: 12px; }
.notification-empty { padding: var(--space-6) var(--space-4); color: var(--muted); text-align: center; }

@media (max-width: 1100px) {
  .organization-layout, .asset-history-grid { grid-template-columns: 1fr; }
  .member-toolbar { grid-template-columns: 1fr; }
  .catalog-toolbar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .organization-profile, .organization-members, .file-list, .version-timeline { padding: var(--space-4); }
  .member-toolbar form, .catalog-toolbar { grid-template-columns: 1fr; }
  .member-table-head { display: none; }
  .member-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .member-row + .member-row { border-top: 1px solid var(--line); }
  .asset-history-grid { margin-top: 12px; }
  .repository-file-row, .repository-file-row > button:first-child { grid-template-columns: 1fr; }
  .notification-popover { position: fixed; top: 68px; right: 12px; left: 12px; width: auto; }
  .catalog-pagination { justify-content: space-between; }
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--body-leading);
  letter-spacing: 0;
}

:where(.sidebar, .main-content, .overview-layout, .feed-column) { min-width: 0; }

body.modal-open { overflow: hidden; }
body.access-blocked .main-content { filter: blur(2px); pointer-events: none; user-select: none; }

a { color: inherit; text-decoration: none; }
:where(button, input, select, textarea) { font: inherit; letter-spacing: 0; }
:where(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
h1, h2, h3, p, dl, dd { margin-top: 0; }
small { font-size: var(--text-xs); line-height: var(--meta-leading); }

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid var(--sidebar-border);
  padding: var(--space-5) var(--space-4);
  background: var(--sidebar);
  box-shadow: none;
  z-index: 20;
}

.sidebar::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  background: none;
  box-shadow: none;
  content: "";
}

.brand {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  padding: var(--space-1) var(--space-2) var(--space-6);
}

.brand-mark {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(103, 232, 218, .22);
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.brand span:last-child { min-width: 0; }
.brand strong { display: block; overflow-wrap: anywhere; color: var(--gray-50); font-size: 13px; line-height: 1.35; }
.brand small { display: block; margin-top: 3px; color: var(--sidebar-text-muted); font-size: var(--text-xs); }

.nav { display: grid; gap: var(--space-4); }

.nav a {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 39px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 var(--space-3);
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.nav a:hover { background: rgba(255, 255, 255, .055); color: var(--gray-50); }
/* 概念图 05/06/08 的选中项是「一条亮色竖条 + 一块淡高亮」而非整块反白，
   站点既有的这一档已经与之同构，故只保留，不改。 */
.nav a.active { background: var(--interaction-dark-soft); color: var(--sidebar-text-strong); box-shadow: inset 2px 0 var(--interaction); }
.nav a.active::after { content: none; }
.nav-icon { display: grid; width: 20px; height: 20px; place-items: center; color: var(--gray-500); font-size: 17px; }
.nav a.active .nav-icon { color: var(--sidebar-interaction); }

.sidebar-foot {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: auto 4px 0;
  padding: var(--space-4) var(--space-2) var(--space-1);
  border-top: 1px solid rgba(215, 225, 236, .12);
  color: var(--sidebar-text-muted);
  font-size: 12px;
}

.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(52, 211, 153, .1); }

.main-content { min-width: 0; padding: 0 var(--content-gutter-wide) var(--space-8); background: var(--bg); }

.page-header {
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: flex-start;
  min-height: 72px;
  margin: 0 auto 22px;
  max-width: var(--page-max-width);
}

.compact-header { min-height: 48px; align-items: center; }
.eyebrow, .section-kicker { margin-bottom: 5px; color: var(--primary); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.agent-text { color: var(--agent); }
.page-header h1 { margin-bottom: 4px; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.page-subtitle { margin-bottom: 0; color: var(--muted); line-height: 1.55; }
.back-link { color: var(--muted); font-weight: 700; }
.back-link:hover { color: var(--primary); }

.account-actions { position: relative; display: flex; gap: var(--space-2); align-items: center; min-height: 40px; }
.settings-shortcut { color: var(--muted); }
.account-wrap { position: relative; }
.account-trigger {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-width: 164px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: #fff;
  color: var(--text);
  box-shadow: none;
  text-align: left;
}

.avatar { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.account-copy { display: grid; min-width: 0; }
.account-copy strong, .account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: 13px; }
.account-copy small { color: var(--muted); font-size: var(--text-xs); }
.chevron { margin-left: auto; color: var(--muted-soft); }

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  width: 230px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-float);
  z-index: 50;
}

.account-menu.open { display: grid; }
.account-menu-head { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.account-menu-head span { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
.account-menu a, .account-menu button { min-height: 40px; border: 0; padding: 0 var(--space-4); background: #fff; color: var(--text); text-align: left; }
.account-menu a { display: flex; align-items: center; }
.account-menu a:hover, .account-menu button:hover { background: var(--surface-soft); }

/* 按钮（设计系统「组件样式与交互 · 按钮」）：
   次级按钮是描边 + 透明底，悬停填充 muted 并让描边转向强调色。
   所有按钮共用 transition-all 200ms，悬停轻微抬升，激活轻微缩小。 */
.button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 var(--space-5);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transform: none;
  transition: border-color var(--transition-base), background-color var(--transition-base),
    box-shadow var(--transition-base), transform var(--transition-base), color var(--transition-base);
}

.button:hover, .icon-button:hover {
  border-color: var(--primary-line);
  background: var(--muted-surface, var(--gray-100));
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
/* 触觉反馈：按下时轻微缩小。 */
.button:active, .icon-button:active { transform: scale(.98); }

/* 主按钮：标志性渐变。这是强调色最重要的一次出现——
   渐变比纯色更有生命力，悬停时提亮并投出带强调色的阴影。 */
.button.primary {
  border-color: transparent;
  background: var(--gradient-accent-surface);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-sm);
}
.button.primary:hover {
  border-color: transparent;
  background: var(--gradient-accent-surface);
  box-shadow: var(--shadow-accent-lg);
  filter: brightness(1.1);
  transform: translateY(-2px);
}
/* 次级 / 描边按钮：透明 → 悬停 muted，描边转向 accent/30。 */
.button.ghost { border-color: var(--line); background: transparent; }
.button.ghost:hover { border-color: var(--primary-line); background: var(--gray-100); color: var(--text); }
.portal-hero-actions .button.ghost { border-color: var(--line); background: var(--surface); color: var(--text); }
.portal-hero-actions .button.ghost:hover { border-color: var(--primary-line); background: var(--gray-100); }
.button.agent-primary {
  border-color: transparent;
  background: var(--gradient-accent-surface);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-sm);
}
.button.agent-primary:hover { box-shadow: var(--shadow-accent-lg); filter: brightness(1.1); }
/* 箭头图标随悬停向右移动——设计系统点名的交互细节。
   站点的行动链接文案以「→」结尾，用伪元素无法命中，
   故对显式包裹的 .arrow 生效，并为链接内的字面箭头提供 inline-block 位移。 */
.button .arrow, .arrow-link .arrow { display: inline-block; transition: transform var(--transition-base); }
.button:hover .arrow, .arrow-link:hover .arrow { transform: translateX(4px); }
.wide-button { width: 100%; }
.icon-button { width: 36px; min-height: 40px; padding: 0; }
.danger-icon { color: var(--danger); }

.offline-banner {
  max-width: var(--page-max-width);
  margin: -8px auto 18px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 13px;
  font-weight: 500;
}

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.feed-column { min-width: 0; }
.section-toolbar, .trending-head, .surface-head, .showcase-toolbar {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
}

.section-toolbar { min-height: 51px; margin-bottom: 12px; }
.section-toolbar h2, .trending-head h2, .surface-head h2 { margin-bottom: 0; font-size: 18px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-1); background: #fff; }
.segmented button { min-height: 31px; border: 0; border-radius: 6px; padding: 0 var(--space-3); background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.segmented button.active { background: var(--primary-soft); color: var(--primary); }

.feed-list { display: grid; gap: var(--space-3); }
.feed-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5) var(--space-4);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.feed-card:hover { border-color: var(--primary-line); box-shadow: 0 12px 28px rgba(23, 33, 43, 0.09); }
.agent-feed:hover { border-color: rgba(37, 99, 235, 0.27); }
.feed-card-top, .type-line, .feed-meta { display: flex; gap: var(--space-2); align-items: center; }
.feed-card-top { justify-content: space-between; margin-bottom: 10px; }
.type-line { flex-wrap: wrap; }
.type-badge, .status-pill, .role-chip, .mini-type, .recommend-label {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  border-radius: 6px;
  padding: 0 var(--space-2);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-micro);
  font-weight: 700;
  white-space: nowrap;
}

.type-badge.agent, .mini-type.agent { background: var(--agent-soft); color: var(--agent); }
.recommend-label { background: var(--surface-soft); color: var(--muted); }
.feed-title { display: inline-block; max-width: 100%; margin-bottom: 7px; overflow-wrap: anywhere; font-size: 18px; font-weight: 700; line-height: 1.42; }
.feed-title:hover { color: var(--primary); }
.feed-card p { margin-bottom: 13px; color: var(--muted); line-height: 1.65; }
.feed-meta { flex-wrap: wrap; color: var(--muted-soft); font-size: 12px; }
.feed-meta span:not(:last-child)::after { content: "·"; margin-left: 8px; }
.follow-button { min-width: 78px; min-height: 31px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--primary); font-size: 12px; font-weight: 700; }
.follow-button.followed { border-color: var(--primary-line-faint); background: var(--primary-soft); }

.trending-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 18px);
  min-height: 420px;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.trending-head { padding: var(--space-4); border-bottom: 1px solid var(--line); }
.live-label { display: flex; gap: var(--space-2); align-items: center; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.live-label span { width: 6px; height: 6px; border-radius: 50%; background: #22a06b; }
.trending-list { display: grid; }
.trending-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; min-height: 72px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.trending-item:last-child { border-bottom: 0; }
.trending-item:hover { background: var(--surface-soft); }
.trend-rank { color: var(--muted-soft); font-family: var(--font-mono); font-size: 12px; }
.trend-content { display: grid; min-width: 0; gap: var(--space-1); }
.trend-content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.trend-content small { display: flex; gap: var(--space-2); align-items: center; color: var(--muted); font-size: var(--text-xs); }
.mini-type { min-height: 18px; padding: 0 var(--space-1); font-size: var(--text-xs); }
.trend-change { color: var(--success); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.trend-change.down { color: var(--danger); }

.page-workspace { max-width: var(--page-max-width); margin: 0 auto; }
/* 概念图的卡片圆角比控件明显更松（见解读第一节第 2 条）。 */
.surface { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.agent-wizard, .static-wizard { max-width: 1040px; }
.agent-stepper, .static-stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.agent-stepper button, .static-stepper button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  min-width: 0;
  border: 0;
  padding: var(--space-1);
  background: transparent;
  color: var(--muted);
  text-align: left;
}
.agent-stepper button > span, .static-stepper button > span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.agent-stepper button strong, .static-stepper button strong { align-self: end; overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
.agent-stepper button small, .static-stepper button small { align-self: start; color: var(--muted-soft); font-size: var(--text-xs); }
.agent-stepper button.active > span { border-color: var(--agent); background: var(--agent); color: #fff; }
.agent-stepper button.active strong { color: var(--agent); }
.static-stepper button.active > span { border-color: var(--primary); background: var(--primary); color: #fff; }
.static-stepper button.active strong { color: var(--primary); }
.agent-stepper button:disabled, .static-stepper button:disabled { cursor: default; opacity: .62; }
.agent-stepper > i, .static-stepper > i { height: 1px; background: var(--line-strong); }
.agent-wizard-form, .static-wizard-form { overflow: hidden; }
.wizard-panel[hidden] { display: none; }
.agent-card-grid { padding-bottom: var(--space-6); }
.connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-5); }
.connection-grid > label { display: grid; gap: var(--space-2); min-width: 0; color: var(--gray-600); font-size: var(--text-xs); font-weight: 700; }
.connection-grid label small { color: var(--muted-soft); font-weight: 400; line-height: 1.5; }
#credential-field[hidden] { display: none; }
.connection-choice { min-width: 0; margin: 0; border: 0; padding: 0; }
.connection-choice legend { margin-bottom: 7px; color: var(--gray-600); font-size: 12px; font-weight: 700; }
.choice-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.choice-segment.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-segment label { position: relative; min-width: 0; }
.choice-segment input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.choice-segment span { display: grid; min-height: 40px; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--space-2); background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.choice-segment input:checked + span { border-color: rgba(37, 99, 235, .34); background: var(--agent-soft); color: var(--agent); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08); }
.choice-segment input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-ring-halo), 0 0 0 5px rgba(29, 78, 216, .35); }
#model-name-field.optional::after { content: "Agent API 可不填写模型名称"; color: var(--muted-soft); font-size: var(--text-xs); font-weight: 400; }
.connection-test-result { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 72px; margin: 0 18px 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--surface-soft); }
.connection-status-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #e9eef2; color: var(--muted); font-weight: 700; }
.connection-test-result div { min-width: 0; }
.connection-test-result strong { display: block; margin: 1px 0 4px; overflow-wrap: anywhere; font-size: 13px; }
.connection-test-result p { margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.55; }
.connection-test-result.loading { border-color: rgba(37, 99, 235, .2); background: var(--agent-soft); }
.connection-test-result.loading .connection-status-icon { background: #d9e6ff; color: var(--agent); }
.connection-test-result.success { border-color: rgba(21, 128, 61, .2); background: #edf8f1; }
.connection-test-result.success .connection-status-icon { background: #d9f0e1; color: var(--success); }
.connection-test-result.error { border-color: rgba(180, 35, 24, .2); background: var(--danger-soft); }
.connection-test-result.error .connection-status-icon { background: #f8deda; color: var(--danger); }
.connection-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.connection-check-list > span { display: flex; gap: var(--space-2); align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2); background: #fff; }
.connection-check-list > span > b { color: var(--success); }
.connection-check-list > span.failed > b { color: var(--danger); }
.connection-check-list > span > span { display: grid; gap: var(--space-1); }
.connection-check-list small { color: var(--muted); font-weight: 500; }
.wizard-actions { align-items: center; }
.action-spacer { flex: 1; }
.agent-test-button { border-color: rgba(37, 99, 235, .28); color: var(--agent); }
.button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; transform: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.static-file-workspace { padding: var(--space-5); }
.static-file-dropzone { display: flex; gap: var(--space-4); align-items: center; min-height: 126px; border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: var(--space-5); background: var(--surface-soft); cursor: pointer; outline: none; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.static-file-dropzone:hover, .static-file-dropzone:focus-visible, .static-file-dropzone.drag-active { border-color: var(--primary-line-strong); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--interaction-ring); }
.dropzone-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid var(--primary-line-soft); border-radius: var(--radius); background: #fff; color: var(--primary); font-size: 22px; font-weight: 500; }
.static-file-dropzone > div { min-width: 0; }
.static-file-dropzone strong { display: block; margin-bottom: 4px; font-size: 15px; }
.static-file-dropzone p { margin: 0; color: var(--muted); font-size: 12px; }
.static-file-dropzone .button { margin-left: auto; flex: 0 0 auto; }
.static-file-toolbar { display: flex; gap: var(--space-4); justify-content: space-between; align-items: center; min-height: 58px; margin-top: 12px; border-bottom: 1px solid var(--line); }
.static-file-toolbar > div { display: grid; gap: var(--space-1); }
.static-file-toolbar strong { font-size: 13px; }
.static-file-toolbar span { color: var(--muted-soft); font-size: var(--text-xs); }
.text-button { min-height: 32px; border: 0; padding: 0 var(--space-1); background: transparent; color: var(--primary); font-size: 12px; font-weight: 700; }
.text-button:disabled { color: var(--muted-soft); cursor: default; }
.static-file-list { display: grid; gap: var(--space-2); padding-top: var(--space-3); }
.static-file-empty { display: grid; justify-items: center; min-height: 190px; align-content: center; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); background: #fff; text-align: center; }
.static-file-empty > span { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 50%; color: var(--primary); }
.static-file-empty strong { margin-bottom: 4px; font-size: 14px; }
.static-file-empty p { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.static-file-empty small { color: var(--muted-soft); font-size: var(--text-xs); }
.static-file-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 36px; gap: var(--space-3); align-items: center; min-height: 66px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); background: #fff; }
.file-extension { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 7px; background: var(--primary-soft); color: var(--primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.file-copy { display: grid; min-width: 0; gap: var(--space-1); }
.file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.file-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--text-xs); }
.demo-file-status { border-radius: 6px; padding: var(--space-1) var(--space-2); background: var(--primary-soft); color: var(--primary); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.form-preview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--space-5); align-items: start; }
.form-surface { overflow: hidden; }
.surface-head { min-height: 66px; padding: var(--space-4) var(--panel-padding); border-bottom: 1px solid var(--line); }
.surface-head > div:first-child { display: flex; gap: var(--space-3); align-items: center; }
.surface-head > div:first-child:has(.section-kicker) { display: block; }
.surface-head.compact { min-height: 58px; border-top: 1px solid var(--line); }
.step-index { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: var(--primary-soft); color: var(--primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.agent-step { background: var(--agent-soft); color: var(--agent); }
.required-note { color: var(--muted-soft); font-size: var(--text-xs); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--panel-padding); }
.form-grid label, .stack-form label { display: grid; gap: var(--space-2); min-width: 0; color: var(--gray-600); font-size: 12px; font-weight: 700; }
.span-2 { grid-column: 1 / -1; }
/* 输入框（设计系统「组件样式与交互 · 输入框」）：
   高度 h-12（48px），rounded-lg，聚焦时 ring-2 ring-accent。 */
input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  outline: none;
  resize: vertical;
  line-height: 1.65;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
/* 占位文字压到 muted-foreground/50，让已填内容与提示明确分层。 */
input::placeholder, textarea::placeholder { color: var(--gray-400); opacity: .75; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--interaction); box-shadow: 0 0 0 3px var(--interaction-ring); outline: 0; }
/* 键盘进入表单控件时恢复可见焦点环（鼠标点击仍只显示柔和辉光） */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-ring-halo), 0 0 0 5px rgba(29, 78, 216, .35);
}
.toggle-row { display: flex !important; flex-direction: row; gap: var(--space-2) !important; align-items: center; min-height: 40px; }
.toggle-row input, .choice-card input, .setting-row input { width: 18px; min-height: 18px; accent-color: var(--primary); }
.form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-4) var(--panel-padding); border-top: 1px solid var(--line); background: var(--surface-soft); }

.preview-surface { position: sticky; top: 22px; overflow: hidden; }
.preview-surface > div:last-child { padding: var(--space-5); }
.preview-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.preview-cover { display: flex; flex-direction: column; justify-content: space-between; min-height: 145px; padding: var(--space-5); color: #fff; }
.static-cover { background: var(--gradient-accent-surface-diagonal); }
.agent-cover { align-items: flex-start; background: var(--gradient-accent-surface-diagonal); }
.preview-cover span { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.preview-cover strong { align-self: flex-end; max-width: 80%; overflow-wrap: anywhere; font-size: 23px; text-align: right; }
.agent-glyph { display: grid; align-self: flex-end; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius); background: rgba(255,255,255,.12); font-size: 28px; font-weight: 700; }
.preview-body { padding: var(--space-4); }
.preview-body h3 { margin: 11px 0 7px; overflow-wrap: anywhere; font-size: 17px; }
.preview-body p { color: var(--muted); line-height: 1.6; }
.preview-provider { padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.preview-body dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-2); margin: 13px 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 12px; }
.preview-body dt { color: var(--muted); }
.preview-body dd { overflow-wrap: anywhere; font-weight: 700; }
.positive { color: var(--success) !important; }

.records-head { align-items: flex-end; }
.filter-bar { display: grid; grid-template-columns: minmax(180px, 1fr) 130px 130px; gap: var(--space-2); width: min(620px, 65%); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table th { background: var(--surface-soft); color: var(--muted); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.data-table td { color: var(--gray-600); font-size: 12px; line-height: 1.5; }
.data-table td strong { display: block; max-width: 260px; overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
.data-table td small { display: block; max-width: 280px; margin-top: 3px; overflow-wrap: anywhere; color: var(--muted-soft); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--gray-50); }
.status-pill.success { background: var(--success-soft); color: var(--success); }
.status-pill.info { background: var(--info-soft); color: var(--info-strong); }
.status-pill.warning { background: var(--warning-soft); color: var(--warning-strong); }
.status-pill.error { background: var(--danger-soft); color: var(--danger); }
.status-pill.muted { background: var(--neutral-status-soft); color: var(--neutral-status); }
.role-chip.admin { background: #eef1f4; color: #3f4c59; }
.row-actions { display: flex; gap: var(--space-1); }
.text-link { color: var(--primary); font-weight: 700; }

.my-results-workspace { max-width: 1180px; }
.my-results-actions { display: flex; gap: var(--space-4); justify-content: space-between; align-items: end; margin-bottom: 14px; }
.my-results-actions h2 { margin: 2px 0 0; font-size: var(--text-xl); }
.create-shortcuts { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.my-results-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); box-shadow: var(--shadow-sm); }
.my-results-filter-grid label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.my-results-filter-grid .my-results-search-field { grid-column: span 2; }
.my-results-summary { display: flex; gap: var(--space-3); align-items: baseline; min-height: 38px; padding: 0 var(--space-1); }
.my-results-summary strong { font-size: 14px; }
.my-results-summary span { color: var(--muted); font-size: var(--text-xs); }
.my-results-list { display: grid; gap: var(--space-3); }
.result-repo-row { display: grid; gap: var(--space-3); min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: #fff; box-shadow: var(--shadow-sm); transition: border-color 150ms ease, box-shadow 150ms ease; }
.result-repo-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.my-result-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.repo-type-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); font-size: var(--text-xs); font-weight: 700; }
.repo-type-icon.agent { background: var(--agent-soft); color: var(--agent); }
.repo-main { display: grid; min-width: 0; gap: 0; line-height: 1.45; }
.repo-main strong, .repo-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-main strong { font-size: var(--text-sm); }
.repo-main small, .repo-kind, .repo-detail, .repo-updated { color: var(--muted); font-size: var(--text-xs); }
.responsibility-chip { display: inline-flex; border-radius: 999px; padding: var(--space-1) var(--space-3); background: var(--primary-soft); color: var(--primary-strong); font-size: var(--text-micro); font-weight: 700; }
.responsibility-chip.maintainer { background: var(--info-soft); color: var(--info-strong); }
/* 状态从 4 格盒子（75px 高）改为单行内联芯片：
   同样四个维度，纵向占用从 75px 降到 26px，一屏可见的成果数量提升约 2.5 倍。
   标签与值改为横向并排，靠字色区分层级而不是靠各自占一行。 */
.my-result-status-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); overflow: visible; border: 0; border-radius: 0; background: none; }
.my-result-status-grid > div { display: inline-flex; gap: var(--space-2); align-items: baseline; min-height: 0; border-right: 0; border-radius: 999px; padding: var(--space-1) var(--space-3); background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--line); }
.my-result-status-grid span, .my-result-version-line small, .my-result-next-action small { color: var(--muted); font-size: var(--text-xs); }
.my-result-status-grid strong { color: var(--text); font-size: var(--text-xs); font-weight: 700; }
/* 版本行紧跟状态芯片行，取消额外的行间距，视觉上归为同一「元信息」带 */
.my-result-version-line { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: calc(var(--space-2) * -1); }
.my-result-version-line > span { display: inline-flex; gap: var(--space-2); align-items: baseline; }
.my-result-version-line strong { font-family: var(--font-data); font-size: var(--text-xs); }
.my-result-footer { display: flex; gap: var(--space-4); justify-content: space-between; align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--line); }
/* 「下一步待办」由上下两行改为同行并排，省去一行行高 */
.my-result-next-action { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.my-result-next-action strong { color: var(--text); font-size: var(--text-sm); }
.my-result-next-action.danger strong { color: var(--danger); }
.my-result-next-action.warning strong { color: var(--warning-strong); }
.my-result-next-action.info strong { color: var(--info-strong); }
.my-result-next-action.success strong { color: var(--success); }

/* 让「需要处理」的行自己跳出来。
   tone 由 myResultNextAction() 计算并已渲染到 DOM，这里只做视觉提升，不改判定逻辑。
   无待办的行（tone=success）保持中性，异常行加左侧色条。 */
.result-repo-row:has(.my-result-next-action.danger) { border-left: 3px solid var(--danger); }
.result-repo-row:has(.my-result-next-action.warning) { border-left: 3px solid var(--warning); }
.result-repo-row:has(.my-result-next-action.info) { border-left: 3px solid var(--info-border); }
.result-repo-row:has(.my-result-next-action.success) .my-result-next-action strong { color: var(--muted); font-weight: 400; }
.visibility-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; border-radius: 6px; padding: 0 var(--space-2); font-size: var(--text-micro); font-weight: 700; white-space: nowrap; }
.visibility-chip.public { background: var(--success-soft); color: var(--success); }
.visibility-chip.private { background: var(--neutral-status-soft); color: var(--neutral-status); }
.repo-arrow { color: var(--muted-soft); font-size: 22px; }

.asset-workspace { max-width: var(--page-narrow-width); }
.asset-workspace-header { min-height: 116px; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; padding: var(--space-6); background: #fff; }
.workspace-title-line { display: flex; gap: var(--space-5); justify-content: space-between; align-items: center; }
.workspace-title-line h1 { margin: 12px 0 5px; overflow-wrap: anywhere; font-size: 26px; }
.workspace-title-line p { margin: 0; color: var(--muted); line-height: 1.5; }
.workspace-visits { display: grid; min-width: 78px; justify-items: end; font-family: var(--font-mono); font-size: 22px; font-weight: 700; }
.workspace-visits small { color: var(--muted); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; }
.asset-workspace-tabs { display: flex; gap: var(--space-1); min-height: 49px; border: 1px solid var(--line); border-top: 0; padding: var(--space-2) var(--space-3) 0; background: #fff; }
.asset-workspace-tabs button { position: relative; min-width: 94px; border: 0; padding: 0 var(--space-4); background: transparent; color: var(--muted); font-weight: 700; }
.asset-workspace-tabs button.active { color: var(--primary); }
.asset-workspace-tabs button.active::after { content: ""; position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; background: var(--primary); }
.asset-workspace-body { min-height: 470px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.asset-workspace-panel[hidden] { display: none; }
.asset-card-view, .asset-card-editor, .asset-file-browser, .asset-file-detail, .asset-chat, .asset-settings { min-height: 470px; }
.asset-panel-head { display: flex; gap: var(--space-4); justify-content: space-between; align-items: center; min-height: 76px; padding: var(--space-5) var(--panel-padding); border-bottom: 1px solid var(--line); }
.asset-panel-head h2 { margin: 0; overflow-wrap: anywhere; font-size: 18px; }
.asset-card-description { max-width: 850px; margin: 0; padding: var(--panel-padding); color: var(--gray-600); font-size: 15px; line-height: 1.75; }
.asset-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0 var(--panel-padding) var(--panel-padding); }
.asset-card-facts > div { display: grid; gap: var(--space-1); min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-padding-compact); background: var(--surface-soft); }
.asset-card-facts dt { color: var(--muted); font-size: var(--text-xs); }
.asset-card-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.55; }
.asset-card-editor .form-grid { padding-top: var(--space-5); }
.full-asset-card-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-editor-section { border-bottom: 1px solid var(--line); padding-top: var(--space-5); }
.card-editor-section > h3 { margin: 0; padding: 0 var(--space-5); font-size: 15px; }
.card-editor-section .form-grid { padding-top: var(--space-3); }
.asset-card-editor input[readonly] { background: var(--surface-soft); color: var(--muted); }

.repository-file-list { display: grid; }
.repository-file-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 120px 18px; gap: var(--space-3); align-items: center; min-height: 68px; border: 0; border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-5); background: #fff; color: var(--text); text-align: left; }
.repository-file-row:hover { background: var(--surface-soft); }
.repository-file-row > span:nth-child(2) { display: grid; min-width: 0; gap: var(--space-1); }
.repository-file-row strong, .repository-file-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repository-file-row small, .repository-file-row > span:nth-child(3) { color: var(--muted); font-size: var(--text-xs); }
.metadata-only-note, .chat-disabled-note { margin: 15px 20px; color: var(--muted); font-size: var(--text-xs); }
.asset-file-detail { padding-bottom: var(--space-6); }
.asset-file-detail > .back-link { margin: 18px 20px 0; border: 0; background: transparent; }
.file-detail-title { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-6) var(--space-5); }
.file-detail-title h2 { margin-bottom: 4px; overflow-wrap: anywhere; }
.file-detail-title p { margin: 0; color: var(--muted); }
.compact-empty { min-height: 150px; margin: 0 20px; }

.asset-chat { display: grid; grid-template-rows: auto minmax(260px, 1fr) auto auto; }
.asset-chat-messages { display: grid; align-content: start; gap: var(--space-4); min-height: 300px; max-height: 520px; overflow-y: auto; padding: var(--panel-padding); background: var(--gray-50); }
.chat-message { display: flex; gap: var(--space-2); max-width: 82%; }
.chat-message.user { justify-self: end; flex-direction: row-reverse; }
.chat-message > span { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--agent-soft); color: var(--agent); font-size: var(--text-xs); font-weight: 700; }
.chat-message.user > span { background: var(--primary-soft); color: var(--primary); }
.chat-message > div { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--panel-padding-compact); background: #fff; }
.chat-message.pending > div { border-style: dashed; background: var(--surface-soft); }
.conversation-meta { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.chat-message.user > div { border-color: var(--primary-line-faint); background: var(--primary-soft); }
.chat-message p { margin: 0; white-space: pre-wrap; line-height: 1.65; }
.chat-message small { display: block; margin-top: 6px; color: var(--muted); font-size: var(--text-xs); }
.asset-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: var(--space-3); padding: var(--space-4) var(--panel-padding); border-top: 1px solid var(--line); }
.asset-chat-composer textarea { min-height: 72px; }

.asset-settings > section:first-child { min-height: 320px; }
.settings-fields { display: grid; gap: var(--space-4); padding: var(--space-5); }
.settings-fields > label:first-child { display: grid; gap: var(--space-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.danger-zone { display: flex; gap: var(--space-5); justify-content: space-between; align-items: center; margin: 20px; border: 1px solid rgba(180, 35, 24, .2); border-radius: var(--radius); padding: var(--space-4); background: var(--danger-soft); }
.danger-zone h2 { margin-bottom: 4px; color: var(--danger); font-size: 15px; }
.danger-zone p { margin: 0; color: var(--danger-strong); font-size: var(--text-xs); }
.asset-archive-panel, .archived-state-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr) auto; gap: var(--space-5); align-items: end; margin: 20px; border: 1px solid var(--danger-border); border-radius: var(--radius); padding: var(--space-5); background: var(--danger-soft); }
.asset-archive-panel.locked { grid-template-columns: 1fr; border-color: var(--line); background: var(--surface-soft); }
.asset-archive-panel h2, .archived-state-card h2 { margin: 4px 0 6px; font-size: 16px; }
.asset-archive-panel p, .archived-state-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.asset-archive-panel label { display: grid; gap: var(--space-2); font-size: 12px; font-weight: 700; }
.asset-archive-panel textarea { min-height: 84px; }
.archived-state-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-color: var(--line-strong); background: var(--gray-50); }
.archived-state-card small { display: block; margin-top: 8px; color: var(--muted); }
.button.danger { border-color: rgba(180, 35, 24, .25); background: #fff; color: var(--danger); }

.showcase-toolbar { margin-bottom: 15px; }
.showcase-toolbar input { width: min(330px, 46%); }
.showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); max-width: var(--page-max-width); margin: 0 auto; }
.showcase-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.showcase-visual { display: flex; justify-content: space-between; align-items: flex-end; min-height: 112px; padding: var(--space-4); color: #fff; }
.showcase-visual.static { background: var(--gradient-accent-surface-diagonal); }
.showcase-visual.agent { background: var(--gradient-accent-surface-diagonal); }
.showcase-visual span { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.showcase-visual strong { font-size: 40px; line-height: 1; opacity: .75; }
.showcase-body { padding: var(--space-4); }
.showcase-body h2 { margin: 10px 0 7px; overflow-wrap: anywhere; font-size: 17px; line-height: 1.4; }
.showcase-body h2 a:hover { color: var(--primary); }
.showcase-body p { min-height: 44px; color: var(--muted); line-height: 1.6; }

.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 760px); gap: var(--space-5); align-items: start; }
.settings-nav { position: sticky; top: 22px; display: grid; gap: var(--space-1); }
.settings-nav a { min-height: 39px; border-radius: var(--radius); padding: var(--space-3) var(--space-3); color: var(--muted); font-weight: 700; }
.settings-nav a.active, .settings-nav a:hover { background: var(--primary-soft); color: var(--primary); }
.settings-form { overflow: hidden; }
.preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-5); }
.choice-card { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.choice-card span { display: grid; gap: var(--space-1); }
.choice-card small, .setting-row small { color: var(--muted); font-weight: 400; line-height: 1.45; }
.setting-rows { display: grid; padding: 0 var(--space-5) var(--space-5); }
.setting-row { display: flex; gap: var(--space-4); justify-content: space-between; align-items: center; min-height: 68px; border-bottom: 1px solid var(--line); }
.setting-row span { display: grid; gap: var(--space-1); }
.account-identity-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0 var(--space-5) var(--space-5); }
.account-identity-summary > div { display: grid; gap: var(--space-1); border-left: 3px solid var(--line-strong); padding: var(--space-3) var(--space-4); background: var(--gray-50); }
.account-identity-summary dt { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.account-identity-summary dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 700; line-height: 1.55; }
.section-description { margin: 0; padding: 0 var(--space-5) var(--space-4); color: var(--muted); line-height: 1.7; }
.platform-credential-list { display: grid; padding: 0 var(--space-5) var(--space-5); }
.platform-credential-row { display: flex; gap: var(--space-3); justify-content: space-between; align-items: center; min-height: 64px; border-top: 1px solid var(--line); }
.platform-credential-row:first-child { border-top: 0; }
.platform-credential-row > span:first-child { display: grid; gap: var(--space-1); min-width: 0; }
.platform-credential-row small { color: var(--muted); }
.platform-credential-once { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; margin: 0 var(--space-5) var(--space-4); border: 1px solid var(--warning-border); padding: var(--space-4); background: var(--warning-soft); }
.platform-credential-once[hidden] { display: none; }
.platform-credential-once strong { grid-column: 1 / -1; color: var(--warning-strong); }
.platform-credential-once code { overflow-x: auto; border: 1px solid var(--line); padding: var(--space-3); background: var(--surface); color: var(--ink); font-family: var(--font-mono); }
.registration-consent { display: grid; gap: var(--space-3); border: 1px solid var(--line); padding: var(--space-4); }
.registration-consent legend { padding: 0 var(--space-2); color: var(--ink); font-weight: 700; }
.registration-consent label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.registration-consent input { width: 18px; min-height: 18px; margin-top: var(--space-1); accent-color: var(--primary); }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-5); align-items: start; }
.detail-main, .detail-aside { overflow: hidden; }
.detail-hero { padding: calc(var(--space-1) * 7); border-bottom: 1px solid var(--line); background: var(--surface); }
.detail-hero h1 { max-width: 760px; margin: 16px 0 10px; overflow-wrap: anywhere; font-size: 30px; line-height: 1.3; }
.detail-hero > p { max-width: 800px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: 23px; }
.detail-meta span { display: grid; gap: var(--space-1); border-left: 2px solid var(--line); padding-left: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.detail-meta strong { overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
.detail-section { padding: var(--space-6) calc(var(--space-1) * 7); border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: 0; }
.detail-section h2 { font-size: 17px; }
.detail-section p { margin-bottom: 0; color: var(--muted); line-height: 1.75; }
.detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.detail-facts div { display: grid; gap: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); }
.detail-facts span { color: var(--muted); font-size: var(--text-xs); }
.detail-aside { position: sticky; top: 22px; padding: var(--space-5); }
.detail-aside h2 { font-size: 17px; }
.detail-aside > p { color: var(--muted); line-height: 1.6; }
.aside-stats { display: grid; gap: var(--space-3); margin-top: 16px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.aside-stats div { display: flex; gap: var(--space-3); justify-content: space-between; color: var(--muted); font-size: 12px; }
.aside-stats strong { color: var(--text); }

.empty-state { grid-column: 1 / -1; display: grid; justify-items: center; min-height: 280px; align-content: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: var(--space-7); background: var(--surface-soft); text-align: center; }
.empty-state > span { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary); font-size: 20px; }
.empty-state h3 { margin-bottom: 5px; font-size: 16px; }
.empty-state p { max-width: 460px; margin-bottom: 0; color: var(--muted); }
.empty-state.compact { min-height: 0; padding: var(--space-5); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: rgba(23, 33, 43, 0.42);
  z-index: 100;
}

.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: min(430px, 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); background: #fff; box-shadow: var(--shadow-float); }
.modal h2 { margin-bottom: 18px; font-size: 22px; }
.modal-close { position: absolute; top: 12px; right: 12px; border: 0; color: var(--muted); font-size: 21px; }
.stack-form { display: grid; gap: var(--space-3); }
.form-error { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px; }
.demo-accounts { margin: 14px 0 0; color: var(--muted-soft); font-size: var(--text-xs); text-align: center; }

.toast { position: fixed; right: 18px; bottom: 18px; display: none; max-width: min(360px, calc(100vw - 36px)); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--sidebar); color: #fff; box-shadow: var(--shadow-float); z-index: 120; }
.toast.show { display: block; }

.nav-icon { width: 20px; height: 20px; color: var(--sidebar-text); font-size: 0; }
.nav-icon::before { width: 17px; height: 17px; background: currentColor; content: ""; mask-position: center; mask-repeat: no-repeat; mask-size: contain; }
.nav a[data-nav="workspace"] .nav-icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-9 9 9'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.nav a[data-nav="notifications"] .nav-icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E"); }
.nav a[data-nav="organization"] .nav-icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3C/svg%3E"); }
.nav a[data-nav="create-static"] .nav-icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E"); }
.nav a[data-nav="create-agent"] .nav-icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='10' x='3' y='11' rx='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v4'/%3E%3Cpath d='M8 16h.01'/%3E%3Cpath d='M16 16h.01'/%3E%3C/svg%3E"); }
.nav a[data-nav="my-results"] .nav-icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.nav a[href="/internal-library.html"] .nav-icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 6 4 14'/%3E%3Cpath d='M12 6v14'/%3E%3Cpath d='M8 8v12'/%3E%3Cpath d='M4 4v16'/%3E%3C/svg%3E"); }
.nav a[href="/external-showcase.html"] .nav-icon::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15 15 0 0 1 0 20'/%3E%3Cpath d='M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E"); }

.mobile-menu-button, .sidebar-backdrop { display: none; }

@media (max-width: 1100px) {
  .form-preview-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .my-results-filter-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 760px) {
  .account-wrap { width: 100%; }
  .surface-head.records-head, .showcase-toolbar { align-items: flex-start; flex-direction: column; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; min-width: 0; padding: 0 var(--space-1); }
  .form-preview-layout, .settings-layout, .detail-layout { grid-template-columns: 1fr; }
  .agent-stepper button, .static-stepper button { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-2); }
  .agent-stepper button > span, .static-stepper button > span { width: 28px; height: 28px; }
  .agent-stepper button small, .static-stepper button small { display: none; }
  .connection-grid .span-2, .span-2 { grid-column: auto; }
  .choice-segment.three { grid-template-columns: 1fr; }
  .wizard-actions { align-items: stretch; }
  .wizard-actions .action-spacer { display: none; }
  .static-file-dropzone { flex-direction: column; align-items: flex-start; }
  .static-file-dropzone .button { width: 100%; margin-left: 0; }
  .static-file-row { grid-template-columns: 42px minmax(0, 1fr) 36px; }
  .static-file-row .demo-file-status { grid-column: 2; justify-self: start; }
  .preview-surface, .settings-nav, .detail-aside { position: static; }
  .settings-nav { display: flex; overflow-x: auto; }
  .settings-nav a { flex: 0 0 auto; }
  .filter-bar { grid-template-columns: 1fr; width: 100%; }
  .showcase-toolbar input { width: 100%; }
  .my-results-actions { align-items: stretch; flex-direction: column; }
  .create-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 8 个筛选器在窄屏单列会堆出约 1300px，把结果挤到首屏之外。
     改为 2 列（搜索框独占整行），筛选区高度减半。 */
  .my-results-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3); }
  .my-results-filter-grid .my-results-search-field { grid-column: 1 / -1; }
  .my-result-heading { grid-template-columns: 30px minmax(0, 1fr); }
  /* 职责芯片在窄屏与标题同列换行，不再单独占一整行 */
  .responsibility-chip { grid-column: 2; justify-self: start; margin-top: 2px; }
  /* 状态芯片已是 flex-wrap，窄屏自然折行，无需再切回 2 列网格 */
  .my-result-footer { align-items: stretch; flex-direction: column; gap: var(--space-2); }
  .repo-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .repo-row-actions .button { flex: 1 1 auto; min-height: 40px; }
  .workspace-title-line { align-items: flex-start; }
  .workspace-title-line h1 { font-size: 22px; }
  .workspace-visits { display: none; }
  .asset-workspace-tabs button { flex: 1; min-width: 0; padding: 0 var(--space-2); }
  .asset-panel-head { align-items: flex-start; }
  .repository-file-row { grid-template-columns: 42px minmax(0, 1fr) 18px; padding: var(--space-2) var(--space-3); }
  .repository-file-row > span:nth-child(3) { display: none; }
  .chat-message { max-width: 94%; }
  .asset-chat-composer { grid-template-columns: 1fr; }
  .danger-zone { align-items: stretch; flex-direction: column; }
  .danger-zone .button { width: 100%; }
  .detail-hero, .detail-section { padding: var(--space-5); }
  .detail-hero h1 { font-size: 24px; }
  .modal { padding: var(--space-6) var(--space-5); }
}

/* Trusted portal and governance surfaces */
.portal-shell { min-height: 100vh; background: var(--gray-50); color: var(--ink); }
.portal-nav { min-height: 72px; padding: 0 clamp(var(--space-5), 5vw, calc(var(--space-1) * 18)); display: flex; align-items: center; gap: var(--space-7); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .96); position: sticky; top: 0; z-index: 30; }
.portal-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; white-space: nowrap; }
.portal-brand > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--primary); color: white; font-weight: 700; }
.portal-brand strong { font-size: 16px; }
.portal-nav nav { display: flex; align-items: center; gap: var(--space-2); flex: 1; }
.portal-nav nav a { padding: var(--space-2) var(--space-3); border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 14px; }
.portal-nav nav a:hover, .portal-nav nav a.active { color: var(--primary-strong); background: var(--primary-soft); }
.portal-menu-button { display: none; }
.portal-account { display: flex; align-items: center; gap: var(--space-2); }
.portal-hero { padding: clamp(calc(var(--space-1) * 16), 9vw, calc(var(--space-1) * 29)) clamp(var(--space-5), 7vw, calc(var(--space-1) * 27)); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: clamp(calc(var(--space-1) * 9), 7vw, calc(var(--space-1) * 24)); align-items: center; background: var(--bg); border-bottom: 1px solid var(--line); }
.portal-hero-copy { max-width: 760px; }
.portal-hero h1 { margin: 12px 0 20px; max-width: 760px; font-size: clamp(38px, 5vw, 66px); line-height: 1.08; letter-spacing: 0; color: #10212a; }
.portal-hero-copy > p:not(.eyebrow) { max-width: 680px; font-size: 18px; line-height: 1.8; color: #54646f; }
.portal-search { margin-top: 32px; display: flex; gap: var(--space-3); max-width: 660px; padding: var(--space-2); border: 1px solid #d7e1e4; border-radius: 8px; background: white; box-shadow: 0 14px 34px rgba(26, 62, 73, .08); }
.portal-search input { flex: 1; min-width: 0; border: 0; padding: 0 var(--space-3); font-size: 16px; outline: 0; }
.portal-search input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.portal-hero-actions { margin-top: 18px; display: flex; align-items: center; gap: var(--space-5); }
.portal-proof { padding: calc(var(--space-1) * 7); border: 1px solid #dbe5e7; border-radius: 8px; background: rgba(255, 255, 255, .82); box-shadow: 0 18px 45px rgba(25, 68, 79, .08); }
.portal-proof span { display: block; color: var(--primary-strong); font-size: 13px; font-weight: 700; }
.portal-proof strong { display: block; margin: 12px 0; font-size: 25px; line-height: 1.35; }
.portal-proof p { color: var(--muted); line-height: 1.7; }
.trust-strip { padding: var(--space-6) clamp(var(--space-5), 7vw, calc(var(--space-1) * 27)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: white; border-bottom: 1px solid var(--line); }
.trust-strip > div { padding: var(--space-1) calc(var(--space-1) * 7); display: grid; gap: var(--space-1); border-right: 1px solid var(--line); }
.trust-strip > div:first-child { padding-left: 0; }
.trust-strip > div:last-child { border-right: 0; }
.trust-strip strong { color: #17343d; }
.trust-strip span { color: var(--muted); font-size: 13px; }
.portal-section { padding: calc(var(--space-1) * 18) clamp(var(--space-5), 7vw, calc(var(--space-1) * 27)); }
.portal-section-head { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); }
.portal-section h2 { margin-top: 6px; font-size: clamp(28px, 3vw, 40px); }
.portal-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.catalog-card { min-height: 224px; padding: var(--space-6); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: transform .18s ease, box-shadow .18s ease; }
.catalog-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(27, 53, 65, .08); }
.catalog-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.catalog-card h3 { margin: 24px 0 10px; font-size: 20px; line-height: 1.4; }
.catalog-card h3 a { color: var(--ink); text-decoration: none; }
.catalog-card p { color: var(--muted); line-height: 1.7; }
.catalog-meta { margin-top: auto; padding-top: var(--space-5); display: flex; justify-content: space-between; gap: var(--space-3); color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.review-state { display: inline-flex; align-items: center; width: max-content; padding: var(--space-1) var(--space-2); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; background: var(--neutral-status-soft); color: var(--neutral-status); }
.review-state.approved { background: var(--success-soft); color: var(--success); }
.review-state.success { background: var(--success-soft); color: var(--success); }
.review-state.published { background: var(--success-soft); color: var(--success); }
.review-state.warning { background: var(--warning-soft); color: var(--warning-strong); }
.review-state.error { background: var(--danger-soft); color: var(--danger); }
.review-state.needs-revision { background: var(--danger-soft); color: var(--danger); }
.review-state.info { background: var(--info-soft); color: var(--info-strong); }
.review-state.muted { background: var(--neutral-status-soft); color: var(--neutral-status); }
.portal-process { background: var(--sidebar); color: var(--sidebar-text-strong); display: grid; grid-template-columns: .7fr 1.3fr; gap: calc(var(--space-1) * 16); }
.portal-process .eyebrow { color: var(--primary-border); }
.portal-process ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.portal-process li { padding: var(--space-6); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(255, 255, 255, .05); }
.portal-process li span { color: var(--primary-border); font-size: 12px; }
.portal-process li strong { display: block; margin: 18px 0 8px; }
.portal-process li p { color: var(--gray-300); line-height: 1.7; }
.portal-footer { min-height: 74px; padding: var(--space-5) clamp(var(--space-5), 7vw, calc(var(--space-1) * 27)); display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); color: var(--muted); font-size: 13px; background: white; border-top: 1px solid var(--line); }
.portal-empty { display: grid; grid-column: 1 / -1; min-height: 280px; align-content: center; justify-items: center; text-align: center; }

:where(
  .surface,
  .public-asset-layout,
  .public-organization-page,
  .governance-queue,
  .runtime-incident-list
) > .loading-line {
  display: grid;
  gap: var(--space-3);
  min-height: 120px;
  align-content: center;
  padding: var(--space-5);
  color: var(--muted);
}
:where(.surface, .public-asset-layout, .public-organization-page, .governance-queue, .runtime-incident-list) > .loading-line::before,
:where(.surface, .public-asset-layout, .public-organization-page, .governance-queue, .runtime-incident-list) > .loading-line::after {
  content: "";
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
:where(.surface, .public-asset-layout, .public-organization-page, .governance-queue, .runtime-incident-list) > .loading-line::before { width: min(72%, 520px); }
:where(.surface, .public-asset-layout, .public-organization-page, .governance-queue, .runtime-incident-list) > .loading-line::after { width: min(48%, 360px); }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  :where(.surface, .public-asset-layout, .public-organization-page, .governance-queue, .runtime-incident-list) > .loading-line::before,
  :where(.surface, .public-asset-layout, .public-organization-page, .governance-queue, .runtime-incident-list) > .loading-line::after { animation: none; }
}

.catalog-layout { min-height: calc(100vh - 146px); padding: var(--space-8) clamp(var(--space-5), 6vw, calc(var(--space-1) * 22)); display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: calc(var(--space-1) * 11); }
.catalog-sidebar { align-self: start; position: sticky; top: 116px; }
.catalog-sidebar h1 { margin: 8px 0 14px; font-size: 32px; }
.catalog-sidebar > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.segmented.vertical { margin-top: 28px; display: grid; gap: var(--space-2); background: transparent; }
.segmented.vertical button { width: 100%; justify-content: flex-start; border: 1px solid var(--line); background: white; }
.catalog-main { min-width: 0; }
.catalog-toolbar { margin-bottom: 20px; display: flex; align-items: center; gap: var(--space-4); }
.catalog-toolbar input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: 7px; background: white; }
.catalog-toolbar span { color: var(--muted); font-size: 13px; white-space: nowrap; }

.public-asset-layout { min-height: calc(100vh - 146px); padding: calc(var(--space-1) * 16) clamp(var(--space-5), 8vw, calc(var(--space-1) * 32)); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: calc(var(--space-1) * 18); align-items: start; }
.public-asset-main h1 { margin: 12px 0 20px; font-size: clamp(36px, 4vw, 56px); line-height: 1.12; }
.public-asset-lead { max-width: 780px; font-size: 19px; line-height: 1.8; color: var(--gray-600); }
.public-asset-body { margin-top: 46px; max-width: 820px; }
.public-asset-body h2 { margin: 34px 0 12px; font-size: 22px; }
.public-asset-body p { color: var(--gray-600); line-height: 1.9; }
.public-asset-aside { display: grid; gap: var(--space-4); position: sticky; top: 112px; }
.trust-card { padding: var(--space-6); border: 1px solid var(--line); border-radius: 8px; background: white; }
.trust-card h2 { margin-bottom: 18px; font-size: 18px; }
.trust-card dl { display: grid; gap: var(--space-4); }
.trust-card dl div { display: grid; grid-template-columns: 86px 1fr; gap: var(--space-3); }
.trust-card dt { color: var(--muted); font-size: 12px; }
.trust-card dd { font-size: 13px; font-weight: 500; }
.organization-link { color: var(--primary-strong); text-decoration: none; font-weight: 700; }
.organization-link:hover { text-decoration: underline; }
.public-organization-page { min-height: calc(100vh - 146px); }
.public-organization-hero { padding: calc(var(--space-1) * 17) clamp(var(--space-5), 8vw, calc(var(--space-1) * 32)); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: calc(var(--space-1) * 16); align-items: start; background: var(--bg); border-bottom: 1px solid var(--line); }
.public-organization-hero h1 { margin: 12px 0 18px; font-size: clamp(36px, 4vw, 56px); line-height: 1.12; }
.public-organization-hero > div > p:not(.eyebrow) { max-width: 760px; color: var(--gray-600); font-size: 18px; line-height: 1.85; }
.organization-public-actions { margin-top: 26px; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.organization-trust-panel { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 14px 34px rgba(27, 53, 65, .06); }
.organization-trust-panel dl { margin-top: 18px; display: grid; gap: var(--space-4); }
.organization-trust-panel dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); }
.organization-trust-panel dt { color: var(--muted); font-size: 12px; }
.organization-trust-panel dd { overflow-wrap: anywhere; font-size: 13px; font-weight: 700; }
.public-organization-assets { padding: calc(var(--space-1) * 15) clamp(var(--space-5), 8vw, calc(var(--space-1) * 32)) calc(var(--space-1) * 19); }
.organization-asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.auth-shell { min-height: 100vh; padding: calc(var(--space-1) * 7) clamp(var(--space-5), 6vw, calc(var(--space-1) * 20)); display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
.auth-shell > .portal-brand { justify-self: start; }
.auth-card { width: min(460px, 100%); margin: 56px auto; padding: calc(var(--space-1) * 10); align-self: center; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 24px 60px rgba(31, 61, 72, .1); }
.auth-card h1 { margin: 8px 0 12px; font-size: 32px; }
.auth-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.auth-card .stack-form { margin-top: 26px; }
.auth-links { margin-top: 20px; display: flex; justify-content: space-between; gap: var(--space-4); font-size: 13px; }

.workspace-shell { min-height: 100vh; }
body[data-page="workspace"] .page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: end;
}
.workspace-summary { margin-bottom: 20px; display: block; }
.workspace-summary .overview-metrics, .workspace-summary#overview-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.workspace-header-actions { display: flex; gap: var(--space-3); align-items: center; }
.review-note { margin-top: 10px; color: var(--warning-strong); }

.governance-function-nav { display: flex; gap: var(--space-2); margin: 0 auto var(--space-5); padding: var(--space-1); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.governance-function-nav button { flex: 0 0 auto; min-height: 42px; padding: 0 var(--space-4); border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--muted); font-weight: 700; white-space: nowrap; }
.governance-function-nav button:hover { background: var(--surface); color: var(--text); }
.governance-function-nav button.active { background: var(--surface); color: var(--interaction-strong); box-shadow: var(--shadow-sm); }
.governance-function-section { display: grid; gap: var(--space-4); margin-right: auto; margin-left: auto; }
.review-filter-toolbar { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: var(--space-3); align-items: end; padding: var(--space-4); }
.review-filter-toolbar label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.review-filter-actions { display: flex; grid-column: 1 / -1; gap: var(--space-2); justify-content: flex-end; }
.governance-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.governance-queue { max-height: calc(100vh - 150px); overflow: auto; display: grid; gap: var(--space-2); }
.governance-queue-item { width: 100%; padding: var(--space-4); display: grid; gap: var(--space-2); text-align: left; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; }
.governance-queue-item:hover, .governance-queue-item.active { border-color: var(--primary-border); background: var(--primary-soft); }
.governance-queue-item small { color: var(--muted); }
.review-queue-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
.review-queue-meta b { color: var(--text); font-family: var(--font-data); }
.governance-detail { min-width: 0; display: grid; gap: var(--space-4); }
.governance-detail > .surface { padding: var(--space-6); }
.review-detail-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-5); }
.review-detail-head h2 { margin: 10px 0 6px; }
.review-detail-head p, .review-summary { color: var(--muted); line-height: 1.7; }
.review-summary { margin-top: 22px; }
.review-validation-report { min-height: 100px; }
.review-check { padding: var(--space-4); border-radius: 7px; }
.review-check.success { background: var(--success-soft); color: var(--success); }
.review-check.warning { background: var(--warning-soft); color: var(--warning-strong); }
.review-check ul { margin: 10px 0 0 20px; }
.review-responsibility-note { display: grid; gap: var(--space-1); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--info); background: var(--info-soft); }
.review-responsibility-note span { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.review-history-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.review-history-list > p { color: var(--muted); }
.review-history-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--panel-padding-compact); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.review-history-list article div { display: grid; gap: var(--space-1); }
.review-history-list article p, .review-history-list article small { color: var(--muted); font-size: var(--text-sm); }
.review-comment-field { display: grid; gap: var(--space-2); font-weight: 700; }
.review-comment-field textarea { min-height: 112px; }
.review-action-bar { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: var(--space-3); align-items: center; }
.governance-security-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.governance-security-list { display: grid; gap: var(--space-2); max-height: calc(100vh - 240px); overflow: auto; }
.governance-security-detail { min-width: 0; min-height: 250px; padding: var(--space-6); }
#emergency-actions { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; padding: var(--space-4); border: 1px solid var(--danger-border); border-radius: var(--radius); background: var(--danger-soft); }
#emergency-actions .review-comment-field { min-width: 0; }
#emergency-actions .review-comment-field textarea { min-height: 84px; background: var(--surface); }
.operations-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.operations-summary-grid > div { display: grid; gap: var(--space-1); min-height: 104px; align-content: center; padding: var(--space-4); border-right: 1px solid var(--line); background: var(--surface); }
.operations-summary-grid > div:last-child { border-right: 0; }
.operations-summary-grid span, .operations-summary-grid small { color: var(--muted); font-size: var(--text-xs); }
.operations-summary-grid strong { font-size: var(--text-xl); }
.platform-audit-panel { padding-bottom: var(--space-5); }
.platform-audit-toolbar { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: var(--space-3); align-items: end; padding: 0 var(--space-5) var(--space-5); }
.platform-audit-toolbar label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.platform-audit-actions { display: flex; gap: var(--space-2); grid-column: 1 / -1; justify-content: flex-end; }
.platform-audit-events { display: grid; gap: var(--space-3); padding: 0 var(--space-5); }
.platform-audit-summary { color: var(--muted); font-size: var(--text-xs); }
.platform-audit-event { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.platform-audit-event > div { display: grid; gap: var(--space-2); min-width: 0; }
.platform-audit-event > div > strong { overflow-wrap: anywhere; }
.platform-audit-event > div > small { color: var(--muted); font-family: var(--font-data); font-size: var(--text-xs); }
.platform-audit-event dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.platform-audit-event dt { color: var(--muted); font-size: var(--text-xs); }
.platform-audit-event dd { margin-top: var(--space-1); overflow-wrap: anywhere; font-size: var(--text-sm); }
.permission-boundary-note { display: grid; gap: var(--space-1); margin: 0 var(--space-5) var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--info); background: var(--info-soft); }
.permission-boundary-note span { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.permission-management-toolbar { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, .8fr)); gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.permission-management-toolbar label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.governance-user-list { display: grid; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); }
.governance-user-card { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.governance-user-identity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.governance-user-identity > div { display: grid; gap: var(--space-1); }
.governance-user-identity small { color: var(--muted); }
.governance-user-context { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--gray-50); }
.governance-user-context dt { color: var(--muted); font-size: var(--text-xs); }
.governance-user-context dd { margin-top: var(--space-1); overflow-wrap: anywhere; font-size: var(--text-sm); }
.user-access-management { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: var(--space-3); align-items: end; }
.user-access-management > div { align-self: center; }
.user-access-management h3, .permission-assignment-head h3 { margin: 0; font-size: var(--text-base); }
.user-access-management p, .permission-assignment-head p { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.user-governance-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.user-governance-control { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(220px, 1fr) auto; gap: var(--space-3); align-items: end; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.user-governance-control h3 { margin: 0; font-size: var(--text-base); }
.user-governance-control p { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.permission-assignment-list { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.permission-assignment-head { display: flex; gap: var(--space-4); align-items: start; justify-content: space-between; }
.permission-assignment { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.permission-assignment > span { display: grid; gap: var(--space-1); }
.permission-assignment small { color: var(--muted); font-size: var(--text-xs); }
.permission-grant-row { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(150px, .55fr) minmax(240px, 1fr) auto; gap: var(--space-2); align-items: center; padding-top: var(--space-2); }

@media (max-width: 1100px) {
  .portal-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-process { grid-template-columns: 1fr; }
  .public-asset-layout { grid-template-columns: 1fr; }
  .public-asset-aside { position: static; }
  .organization-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .governance-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .governance-security-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .review-filter-toolbar { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .operations-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operations-summary-grid > div:nth-child(3) { border-right: 0; }
  .operations-summary-grid > div:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .platform-audit-toolbar { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .platform-audit-event { grid-template-columns: 1fr; }
  .user-access-management { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-management-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-governance-actions { grid-template-columns: 1fr; }
  .permission-grant-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .portal-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand menu account" "nav nav nav";
    gap: var(--space-2);
    align-items: center;
    min-height: 64px;
    padding: var(--space-2) var(--space-4);
  }
  .portal-brand { grid-area: brand; min-width: 0; }
  .portal-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .portal-menu-button { display: inline-grid; grid-area: menu; }
  .portal-account { grid-area: account; }
  .portal-nav nav { grid-area: nav; display: none; width: 100%; padding-bottom: var(--space-2); }
  .portal-nav[data-menu-open="true"] nav { display: grid; grid-template-columns: 1fr; }
  .portal-nav nav a { display: flex; align-items: center; min-height: 40px; }
  .portal-hero { padding: var(--space-8) var(--space-5); grid-template-columns: 1fr; }
  .portal-hero h1 { font-size: 39px; }
  .portal-search { display: grid; }
  .portal-search input { min-height: 44px; }
  .portal-hero-actions { align-items: flex-start; flex-direction: column; }
  .trust-strip { padding: var(--space-5); grid-template-columns: 1fr; gap: var(--space-4); }
  .trust-strip > div, .trust-strip > div:first-child { padding: 0 0 var(--space-4); border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-strip > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .portal-section { padding: var(--space-8) var(--space-5); }
  .portal-section-head { align-items: flex-start; flex-direction: column; }
  .portal-feature-grid, .portal-process ol { grid-template-columns: 1fr; }
  .portal-footer { padding: var(--space-5) var(--space-5); align-items: flex-start; flex-direction: column; }
  .catalog-layout { padding: var(--space-7) var(--space-5); grid-template-columns: 1fr; }
  .catalog-sidebar { position: static; }
  .segmented.vertical { display: flex; overflow: auto; }
  .segmented.vertical button { width: auto; white-space: nowrap; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .public-asset-layout { padding: calc(var(--space-1) * 11) var(--space-5); gap: calc(var(--space-1) * 9); }
  .public-organization-hero { padding: calc(var(--space-1) * 11) var(--space-5); grid-template-columns: 1fr; gap: calc(var(--space-1) * 7); }
  .public-organization-hero h1 { font-size: 36px; }
  .organization-public-actions { align-items: stretch; flex-direction: column; }
  .organization-public-actions .button { width: 100%; }
  .public-organization-assets { padding: calc(var(--space-1) * 11) var(--space-5) calc(var(--space-1) * 15); }
  .organization-asset-grid { grid-template-columns: 1fr; }
  .auth-shell { padding: var(--space-5) var(--space-4); }
  .auth-card { margin: 32px auto; padding: calc(var(--space-1) * 7) var(--space-5); }
  .organization-function-nav { width: 100%; margin-bottom: var(--space-4); }
  .organization-function-nav button { flex: 1 0 auto; }
  .organization-record-filter { grid-template-columns: 1fr; padding-right: var(--space-4); padding-left: var(--space-4); }
  .organization-record-list { padding-right: var(--space-4); padding-left: var(--space-4); }
  .organization-record-item { grid-template-columns: 1fr; }
  .organization-preview-hero { grid-template-columns: 1fr; }
  .governance-function-nav { width: 100%; margin-bottom: var(--space-4); }
  .governance-function-nav button { flex: 1 0 auto; }
  .review-filter-toolbar { grid-template-columns: 1fr; }
  .review-filter-actions { display: grid; grid-column: 1; }
  .governance-layout { grid-template-columns: 1fr; }
  .governance-queue { max-height: 280px; }
  .governance-security-layout { grid-template-columns: 1fr; }
  .governance-security-list { max-height: 280px; }
  .governance-security-detail { min-height: 220px; padding: var(--space-4); }
  .review-detail-head { flex-direction: column; }
  .review-action-bar { grid-template-columns: 1fr 1fr; }
  .review-action-bar span { display: none; }
  #emergency-actions { grid-template-columns: 1fr; align-items: stretch; }
  #emergency-actions .button { width: 100%; }
  .operations-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-summary-grid > div, .operations-summary-grid > div:nth-child(3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .operations-summary-grid > div:nth-child(2n) { border-right: 0; }
  .operations-summary-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .platform-audit-toolbar { grid-template-columns: 1fr; padding-right: var(--space-4); padding-left: var(--space-4); }
  .platform-audit-actions { display: grid; grid-column: 1; }
  .platform-audit-events { padding-right: var(--space-4); padding-left: var(--space-4); }
  .platform-audit-event dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-management-toolbar { grid-template-columns: 1fr; padding-right: var(--space-4); padding-left: var(--space-4); }
  .governance-user-list { padding-right: var(--space-4); padding-left: var(--space-4); }
  .governance-user-identity { grid-template-columns: auto minmax(0, 1fr); }
  .governance-user-identity > .review-state { grid-column: 2; justify-self: start; }
  .governance-user-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-access-management, .permission-grant-row { grid-template-columns: 1fr; }
  .user-access-management .button, .permission-grant-row .button { width: 100%; }
  .workspace-header-actions { align-items: stretch; flex-direction: column; }
}
/* Internal product shell */
.nav-section { display: grid; gap: var(--space-1); }
.nav-section-label {
  padding: 0 var(--space-3) var(--space-1);
  color: var(--sidebar-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
.main-content::before { content: none; }
.product-topbar {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(210px, auto) minmax(280px, 560px) minmax(260px, auto);
  gap: var(--space-6);
  align-items: center;
  min-height: var(--topbar-height);
  margin: 0 calc(var(--content-gutter-wide) * -1) var(--space-6);
  padding: 0 var(--content-gutter-wide);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 3px rgba(20, 36, 58, .045);
  backdrop-filter: none;
  z-index: 45;
}
.topbar-context { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.workspace-mark {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 700;
}
.topbar-context > span:last-child { display: grid; min-width: 0; }
.topbar-context strong, .topbar-context small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-context strong { color: var(--text); font-size: 13px; }
.topbar-context small { margin-top: 1px; color: var(--gray-400); font-size: var(--text-xs); }
.global-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 var(--space-3);
  background: var(--gray-50);
}
.global-search:focus-within { border-color: var(--interaction); background: #fff; box-shadow: 0 0 0 3px var(--interaction-ring); }
.global-search input { min-height: 34px; border: 0; padding: 0; background: transparent; box-shadow: none; }
.global-search input:focus { border: 0; box-shadow: none; }
.global-search kbd { border: 1px solid var(--line-strong); border-radius: 4px; padding: var(--space-1) var(--space-1); background: #fff; color: var(--gray-400); font-family: var(--font-sans); font-size: var(--text-xs); }
.topbar-actions { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; min-width: 0; }
.topbar-icon-button {
  position: relative;
  display: inline-grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0;
  background: #fff;
  color: var(--gray-500);
}
.topbar-icon-button:hover { border-color: var(--line-strong); background: var(--gray-50); color: var(--gray-700); }
.topbar-icon { display: block; width: 17px; height: 17px; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; }
.search-icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m21 20.3-4.6-4.6a8 8 0 1 0-.7.7l4.6 4.6.7-.7ZM5 10a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z'/%3E%3C/svg%3E"); }
.help-icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-4.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-9.5a3.5 3.5 0 0 0-3.5 3.5h2A1.5 1.5 0 1 1 12 11c-1.1 0-1.5.9-1.5 2v.5h2V13c0-.1 0 0 .4-.2A3.5 3.5 0 0 0 12 6Z'/%3E%3C/svg%3E"); }
.notification-icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.4 2.4 0 0 0 2.3-2h-4.6a2.4 2.4 0 0 0 2.3 2Zm7-5-2-2v-4a5 5 0 0 0-4-4.9V5a1 1 0 1 0-2 0v1.1A5 5 0 0 0 7 11v4l-2 2v1h14v-1Z'/%3E%3C/svg%3E"); }
.menu-icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z'/%3E%3C/svg%3E"); }
.notification-dot { display: none; }
.notification-wrap { position: relative; }
.notification-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: 250px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-4);
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
  z-index: 55;
}
.notification-menu[hidden] { display: none; }
.notification-menu strong { color: var(--text); font-size: 13px; }
.notification-menu p { margin: 8px 0 0; color: var(--gray-500); font-size: 12px; }
.product-topbar-account { min-width: 0; }
.product-topbar .mobile-menu-button { display: none; }
.product-topbar .account-actions { min-height: 36px; }
.product-topbar .account-actions > .button { min-height: 36px; padding: 0 var(--space-3); }
.account-menu-head { border-color: var(--line); color: var(--text); }
.account-menu-head span { color: var(--gray-500); }
.account-menu a, .account-menu button { background: #fff; color: var(--gray-700); }
.account-menu a:hover, .account-menu button:hover { background: var(--gray-50); color: var(--text); }
.account-menu .role-chip { justify-self: start; margin-top: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Page hierarchy */
.page-header {
  min-height: 0;
  max-width: var(--page-max-width);
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
}
.page-header h1 { margin-bottom: 5px; color: var(--text); font-size: 27px; font-weight: 700; }
.page-subtitle { color: var(--gray-500); font-size: 13px; }
.eyebrow, .section-kicker { margin-bottom: 6px; color: var(--primary); font-family: var(--font-sans); font-size: var(--text-micro); font-weight: 700; }
.page-workspace { max-width: var(--page-max-width); }
.offline-banner { max-width: var(--page-max-width); border-color: #f0d4a4; box-shadow: none; }

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--page-max-width);
  margin: 0 auto 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.overview-metric { display: flex; min-height: 68px; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-right: 1px solid var(--line); }
.overview-metric:last-child { border-right: 0; }
.overview-metric span { color: var(--gray-500); font-size: 12px; font-weight: 500; }
.overview-metric strong { color: var(--text); font-size: 22px; font-weight: 700; }
.overview-metric.primary strong { color: var(--primary); }
.overview-metric.agent strong { color: var(--accent); }
.overview-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); max-width: var(--page-max-width); }
.section-toolbar { min-height: 40px; margin-bottom: 10px; }
.section-toolbar h2, .trending-head h2, .surface-head h2 { font-size: 17px; }
/* surface-head 里的 h3 此前没有规则，落到 UA 默认 1.17em（14×1.17=16.38px）。
   显式定为 16px，保证与同处的 h2 17px 构成整数级差。 */
.section-toolbar h3, .trending-head h3, .surface-head h3 { margin-bottom: 0; font-size: 16px; }
.segmented { border-color: var(--line); box-shadow: none; }
.segmented button { min-height: 29px; }
.segmented button.active { background: var(--primary-soft); color: var(--accent); box-shadow: none; }

/* Asset objects */
.feed-list { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.feed-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 96px;
  gap: var(--space-4);
  align-items: start;
  min-height: 132px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
  transform: none;
}
.feed-card::before, .agent-feed::before { content: none; }
.feed-card:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(16, 24, 40, 0.07); transform: none; }
.agent-feed:hover { border-color: var(--primary-line); }
.asset-identity {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--accent);
}
.asset-identity.agent { border: 0; }
.asset-identity span { font-size: 14px; font-weight: 700; }
.asset-row-main { min-width: 0; }
.asset-row .type-line { margin-bottom: 5px; }
.asset-row .feed-title { margin-bottom: 5px; color: var(--text); font-size: 16px; line-height: 1.35; }
.asset-row .feed-title:hover { color: var(--accent); }
.asset-row p { display: -webkit-box; min-height: 0; margin-bottom: 10px; overflow: hidden; color: var(--gray-500); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.asset-row .feed-meta { gap: var(--space-2); color: var(--gray-400); font-size: var(--text-xs); }
.feed-meta span:not(:last-child)::after { content: "·"; color: var(--line-strong); }
.asset-row-status { display: inline-flex; gap: var(--space-1); align-items: center; min-height: 22px; border-radius: 5px; padding: 0 var(--space-2); background: var(--neutral-status-soft); color: var(--neutral-status); font-size: var(--text-xs); font-weight: 700; }
.asset-row-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.asset-row-status.online { background: var(--success-soft); color: var(--success); }
.asset-row-status.published { background: var(--success-soft); color: var(--success); }
.asset-row-status.private { background: var(--neutral-status-soft); color: var(--neutral-status); }
.asset-row-status.warning { background: var(--warning-soft); color: var(--warning-strong); }
.asset-row-side { display: grid; gap: var(--space-3); justify-items: end; align-self: stretch; }
.asset-visit-count { display: grid; justify-items: end; color: var(--gray-400); }
.asset-visit-count strong { color: var(--gray-700); font-size: 14px; }
.asset-visit-count small { font-size: var(--text-xs); }
.follow-button { align-self: end; min-width: 72px; border-color: var(--line-strong); box-shadow: none; }
.follow-button:hover { border-color: var(--primary-line); background: var(--primary-soft); }
.follow-button.followed { border-color: var(--primary-line); background: var(--primary-soft); }
.type-badge, .status-pill, .role-chip, .mini-type, .recommend-label { border: 0; border-radius: 5px; }

.trending-panel { top: calc(var(--topbar-height) + 18px); min-height: 420px; border-color: var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025); }
.trending-head { padding: var(--space-4); border-color: var(--line); background: #fff; }
.trending-head h2 { color: var(--text); }
.trending-head .section-kicker { color: var(--primary); }
.trending-head .live-label { color: var(--gray-500); }
.trending-head .live-label span { background: var(--success); box-shadow: none; }
.trending-item { min-height: 66px; padding: var(--space-3) var(--space-3); background: #fff; }
.trending-item:hover { background: var(--gray-50); }
.trend-rank { color: var(--gray-400); font-size: var(--text-xs); }
.trend-content strong { color: var(--gray-700); font-size: 12px; }

/* Forms and managed content */
.agent-stepper, .static-stepper, .asset-workspace-header, .asset-workspace-body, .asset-workspace-tabs, .my-results-list {
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
}
.surface-head { min-height: 60px; border-color: var(--line); background: #fff; }
.surface-head.compact { background: var(--gray-50); }
.agent-wizard, .static-wizard { max-width: var(--page-wizard-width); }
.agent-stepper, .static-stepper { margin-bottom: 14px; padding: var(--space-3) var(--space-4); }
.agent-stepper button.active > span, .static-stepper button.active > span { box-shadow: none; }
.wizard-panel .surface-head { border-left: 0; }
.step-index { border: 0; }
.agent-step { background: var(--primary-soft); color: var(--accent); }
.form-actions { border-color: var(--line); background: var(--gray-50); }
.static-file-dropzone { border-color: var(--line-strong); background: var(--gray-50); background-image: none; }
.static-file-dropzone:hover, .static-file-dropzone:focus-visible, .static-file-dropzone.drag-active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--interaction-ring); }
/* 键盘聚焦时用实心焦点环，不与 hover 共用柔和辉光 */
.static-file-dropzone:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-ring-halo), 0 0 0 5px rgba(29, 78, 216, .35); }
.static-file-row { border-color: var(--line); background: #fff; }
.connection-test-result { border-color: var(--line); box-shadow: none; }
.connection-test-result.loading { border-left: 3px solid var(--agent); box-shadow: none; }
.connection-test-result.success { border-left: 3px solid var(--success); box-shadow: none; }
.connection-test-result.error { border-left: 3px solid var(--danger); box-shadow: none; }

.data-table thead { background: var(--gray-50); color: var(--gray-500); }
.data-table th { border-color: var(--line); color: var(--gray-500); font-family: var(--font-sans); font-size: var(--text-xs); }
.data-table td { border-color: var(--line); }
.data-table tbody tr { background: #fff; }
.data-table tbody tr:hover { background: var(--gray-50); }
.my-results-actions { margin-bottom: 12px; }
.my-results-list { overflow: hidden; }
.result-repo-row { min-height: 72px; background: #fff; }
.result-repo-row::before { content: none; }
.result-repo-row:hover, .result-repo-row:has(.repo-type-icon.agent):hover { background: var(--gray-50); }
.repo-type-icon { border-radius: 8px; box-shadow: none; }

.asset-workspace { max-width: var(--page-narrow-width); }
.asset-workspace-header { background: #fff; }
.asset-workspace-header::before { content: none; }
.asset-workspace-tabs { background: var(--gray-50); }
.asset-workspace-tabs button.active::after { height: 2px; box-shadow: none; }
.asset-workspace-body { background: #fff; }
.asset-card-facts div { border-color: var(--line); background: var(--gray-50); }
.repository-file-row { border-color: var(--line); }
.repository-file-row:hover { background: var(--gray-50); }
.asset-chat-messages { background: var(--gray-50); background-image: none; }
.chat-message > div { border-color: #dfe5eb; box-shadow: none; }
.danger-zone { border-color: var(--danger-border); background: var(--danger-soft); box-shadow: none; }

.showcase-grid { gap: var(--space-4); }
.showcase-card { border-color: var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025); transform: none; }
.showcase-card::before { content: none; }
.showcase-card:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(16, 24, 40, 0.07); transform: none; }
.showcase-visual { min-height: 92px; }
.showcase-visual.static { background: var(--gradient-accent-surface-diagonal); }
.showcase-visual.agent { background: var(--gradient-accent-surface-diagonal); }
.settings-nav { border-color: var(--line); box-shadow: none; }
.settings-nav a.active, .settings-nav a:hover { box-shadow: inset 2px 0 var(--accent); }
.choice-card { border-color: var(--line); background: #fff; }
.choice-card:has(input:checked) { border-color: var(--primary-line); background: var(--primary-soft); }

.modal-backdrop { background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(2px); }
.modal { border-color: var(--line); border-top: 0; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2); }
.help-list { display: grid; gap: var(--space-3); }
.help-list p { display: grid; gap: var(--space-1); margin: 0; border: 1px solid var(--line); border-radius: 7px; padding: var(--space-3); background: var(--gray-50); }
.help-list strong { color: var(--gray-700); }
.help-list span { color: var(--gray-500); font-size: 12px; line-height: 1.55; }
.toast { border: 0; background: var(--text); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-ring-halo), 0 0 0 5px rgba(29, 78, 216, .35);
}
/* .button.primary 等复合选择器会覆盖 box-shadow，用同等特异性把光环加回来 */
.button:focus-visible, .icon-button:focus-visible, .text-button:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring-halo), 0 0 0 5px rgba(29, 78, 216, .35);
}
/* 深色侧栏内反转：白色描边 + 深色隔离圈 */
.sidebar :focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 5px rgba(255, 255, 255, .45);
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .main-content { padding: 0 var(--content-gutter-medium) calc(var(--space-1) * 11); }
  .product-topbar { grid-template-columns: minmax(180px, auto) minmax(220px, 1fr) auto; margin: 0 calc(var(--content-gutter-medium) * -1) var(--space-6); padding: 0 var(--content-gutter-medium); }
  .product-topbar .mobile-menu-button { display: inline-grid; }
  .app-shell > .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: min(286px, calc(100vw - 44px));
    height: 100vh;
    padding: var(--space-5) var(--space-4);
    border-right: 1px solid var(--sidebar-border);
    transform: translateX(-104%);
    transition: transform 180ms ease;
    z-index: 80;
  }
  .sidebar .nav { display: grid; overflow: visible; }
  .sidebar-foot { display: flex; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open { overflow: hidden; }
  .sidebar-backdrop { position: fixed; inset: 0; border: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); z-index: 70; }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .overview-layout { grid-template-columns: 1fr; }
  .trending-panel { position: static; min-height: 0; }
  .trending-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trending-item:nth-child(odd) { border-right: 1px solid var(--line); }
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .main-content { padding: 0 var(--content-gutter-compact) calc(var(--space-1) * 9); }
  .product-topbar { grid-template-columns: auto 1fr; min-height: 58px; margin: 0 calc(var(--content-gutter-compact) * -1) 18px; padding: 0 var(--content-gutter-compact); }
  .topbar-context > .workspace-mark, .topbar-context > span:last-child, .global-search, .topbar-actions > [data-open-help] { display: none; }
  .topbar-actions { gap: var(--space-2); }
  .product-topbar .account-trigger { min-width: 0; width: 40px; padding: var(--space-1); }
  .product-topbar .account-copy, .product-topbar .chevron { display: none; }
  .product-topbar .account-actions > .button { min-height: 34px; padding: 0 var(--space-3); font-size: 12px; }
  .page-header { margin-bottom: 17px; }
  body[data-page="workspace"] .page-header { grid-template-columns: 1fr; align-items: start; }
  body[data-page="workspace"] .workspace-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  body[data-page="workspace"] .workspace-header-actions .button { width: 100%; }
  .page-header h1 { font-size: 24px; }
  .overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-metric { display: grid; min-height: 70px; justify-content: stretch; align-content: center; gap: var(--space-1); border-right: 1px solid var(--line); border-bottom: 0; padding: var(--space-3); text-align: center; }
  .overview-metric:last-child { border-right: 0; }
  .overview-metric span { font-size: var(--text-xs); white-space: nowrap; }
  .overview-metric strong { font-size: 19px; }
  .section-toolbar { align-items: stretch; flex-direction: column; }
  .feed-card { grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-3); min-height: 0; padding: var(--space-4); }
  .asset-identity { width: 40px; height: 40px; }
  .asset-row-side { grid-column: 2; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .asset-visit-count { justify-items: start; }
  .follow-button { align-self: center; }
  .asset-row p { -webkit-line-clamp: 3; }
  .trending-list { grid-template-columns: 1fr; }
  .trending-item:nth-child(odd) { border-right: 0; }
  .showcase-grid { grid-template-columns: 1fr; }
  .agent-stepper, .static-stepper { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  .form-grid, .connection-grid, .preference-grid, .asset-card-facts, .full-asset-card-facts { grid-template-columns: 1fr; }
  .account-identity-summary, .platform-credential-once { grid-template-columns: 1fr; }
  .platform-credential-once strong { grid-column: 1; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
  .account-menu { right: -2px; }
  .notification-menu { right: -48px; width: min(250px, calc(100vw - 28px)); }
}

/* Catalog and repository component refinements */
.catalog-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 190px 160px auto auto; align-items: center; gap: var(--space-3); }
.catalog-toolbar select { height: 44px; border: 1px solid var(--line); border-radius: 7px; background: white; padding: 0 var(--space-3); }
.repository-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; min-height: 68px; padding: var(--space-2) var(--space-5); }
.repository-file-row > button:first-child { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(90px, auto); gap: var(--space-3); align-items: center; }

@media (max-width: 1100px) {
  .catalog-toolbar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .catalog-toolbar, .repository-file-row, .repository-file-row > button:first-child { grid-template-columns: 1fr; }
  .public-file-item { align-items: flex-start; flex-direction: column; }
  .public-file-actions { width: 100%; justify-content: space-between; }
  .file-detail-actions { flex-direction: column; }
  .file-detail-actions .button { width: 100%; }
  .asset-archive-panel, .archived-state-card { grid-template-columns: 1fr; align-items: stretch; margin: 14px; }
  .asset-archive-panel .button, .archived-state-card .button { width: 100%; }
}

/* Agent runtime components */
.choice-segment.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.credential-warning { grid-column: 1 / -1; margin: 0; border: 1px solid var(--info-border); border-radius: 7px; padding: var(--space-3) var(--space-3); background: var(--info-soft); color: var(--gray-600); font-size: 12px; line-height: 1.55; }
.agent-runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: 18px; }
.agent-runtime-grid > .surface { min-width: 0; overflow: hidden; }
.runtime-status-card, .runtime-policy-form, .runtime-metrics-surface, .invocation-audit-list { grid-column: 1 / -1; }
.runtime-status-grid, .runtime-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.runtime-status-grid > div, .runtime-metrics-grid > div { display: grid; gap: var(--space-1); min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: var(--space-3) var(--space-3); background: var(--surface-soft); }
.runtime-status-grid span, .runtime-metrics-grid span { color: var(--muted); font-size: var(--text-xs); }
.runtime-status-grid strong, .runtime-metrics-grid strong { overflow-wrap: anywhere; color: var(--ink); font-size: 16px; }
.runtime-warning { margin: 0 18px 16px; border-left: 3px solid var(--danger); padding: var(--space-2) var(--space-3); background: var(--danger-soft); color: var(--danger-strong); font-size: 12px; }
.runtime-status-card > .credential-warning { margin: 0 18px 16px; }
.runtime-policy-form .form-grid { padding-top: var(--space-4); }
.agent-runtime-workspace { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); }
.agent-runtime-workspace[hidden] { display: none; }
.agent-runtime-grid form > label:not(.setting-row) { display: grid; gap: var(--space-2); margin: 16px 18px; color: var(--muted); font-size: 12px; font-weight: 700; }
.runtime-version-list select { width: 100%; }
.runtime-error-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); }
.runtime-error-chips span { border-radius: 999px; padding: var(--space-1) var(--space-2); background: var(--danger-soft); color: var(--danger-strong); font-size: var(--text-xs); }
.invocation-audit-list, .runtime-incident-list { display: grid; }
.invocation-audit-row, .runtime-incident-row { display: grid; grid-template-columns: minmax(160px, 1.25fr) repeat(3, minmax(120px, .8fr)); gap: var(--space-3); align-items: center; min-height: 64px; border-top: 1px solid var(--line); padding: var(--space-3) var(--space-5); color: var(--ink); }
.invocation-audit-row:first-child, .runtime-incident-row:first-child { border-top: 0; }
.invocation-audit-row > span, .runtime-incident-row > span { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.invocation-audit-row small, .runtime-incident-row small { color: var(--muted); font-size: var(--text-xs); text-transform: none; }
.invocation-audit-row.failed, .invocation-audit-row.blocked, .runtime-incident-row.warning { background: var(--danger-soft); }
.organization-agent-metrics { grid-column: 1 / -1; }
.public-agent-call { margin-top: 24px; border-top: 1px solid var(--line); padding-top: var(--space-5); }
.public-agent-call form { display: grid; gap: var(--space-3); }
.public-agent-call textarea { min-height: 100px; }
.public-agent-answer { display: grid; gap: var(--space-2); margin-top: 12px; border: 1px solid var(--line); border-radius: 7px; padding: var(--space-3); background: var(--surface-soft); white-space: pre-wrap; }
.public-agent-answer small { color: var(--muted); }

@media (max-width: 1100px) {
  .runtime-status-grid, .runtime-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invocation-audit-row, .runtime-incident-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .choice-segment.four, .agent-runtime-grid, .runtime-status-grid, .runtime-metrics-grid, .invocation-audit-row, .runtime-incident-row { grid-template-columns: 1fr; }
  .agent-runtime-grid { gap: var(--space-3); margin-top: 12px; }
  .agent-runtime-grid .form-actions { flex-direction: column-reverse; }
  .invocation-audit-row, .runtime-incident-row { align-items: stretch; padding: var(--space-3) var(--space-4); }
}

/* Unified page-family refinements */
body[data-page="portal"],
body[data-page="catalog"],
body[data-page="public-asset"],
body[data-page="public-organization"],
body[data-page="intake-guide"],
body[data-page="login"],
body[data-page="register"],
body[data-page="workspace"],
body[data-page="my-results"],
body[data-page="create-static"],
body[data-page="create-agent"],
body[data-page="asset-detail"],
body[data-page="organization"],
body[data-page="governance"],
body[data-page="settings"] { background: var(--bg); color: var(--text); }

.auth-card,
.portal-proof,
.trust-card,
.organization-trust-panel,
.catalog-card,
.governance-queue-item,
.feed-card,
.trending-panel,
.asset-workspace,
.showcase-toolbar,
.overview-metrics,
.member-table {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.eyebrow,
.section-kicker { color: var(--primary-strong); letter-spacing: .035em; }
.page-subtitle,
.surface-head span,
.metadata-only-note { color: var(--muted); }
.page-header { max-width: var(--page-max-width); margin: 0 auto 20px; }
.page-header h1 { color: var(--text); font-size: clamp(28px, 2.5vw, 34px); letter-spacing: 0; }
.page-workspace { max-width: var(--page-max-width); margin-right: auto; margin-left: auto; }
.surface-head { min-height: 64px; padding: var(--space-4) var(--panel-padding); border-bottom-color: var(--line); }
.surface-head.compact { min-height: 58px; padding-top: var(--space-4); padding-bottom: var(--space-4); }
.surface-head h2 { color: var(--text); font-size: 19px; letter-spacing: 0; }

.account-avatar { background: var(--primary-soft); color: var(--primary-strong); }

/* Public portal family */
.portal-shell { background: var(--bg); color: var(--text); }
.portal-nav {
  min-height: 68px;
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 3px rgba(20, 36, 58, .035);
}
.portal-brand { color: var(--text); }
.portal-brand > span { background: var(--primary); box-shadow: 0 4px 12px rgba(11, 145, 133, .18); }
.portal-nav nav a { color: var(--muted); }
.portal-nav nav a:hover,
.portal-nav nav a.active { color: var(--interaction-strong); background: var(--interaction-soft); }
.portal-hero,
.public-organization-hero {
  border-bottom-color: var(--line);
  background: linear-gradient(120deg, #f8fbfd 0%, #edf7f6 100%);
}
.portal-hero { padding-top: clamp(calc(var(--space-1) * 17), 8vw, calc(var(--space-1) * 24)); padding-bottom: clamp(calc(var(--space-1) * 17), 8vw, calc(var(--space-1) * 24)); }
.portal-hero h1 { max-width: 820px; color: var(--text); font-size: clamp(42px, 4.7vw, 60px); }
.portal-hero-copy > p:not(.eyebrow),
.public-organization-hero > div > p:not(.eyebrow),
.public-asset-lead { color: var(--muted); }
.portal-search { border-color: var(--line); box-shadow: 0 12px 30px rgba(28, 57, 89, .08); }
.portal-proof,
.organization-trust-panel { box-shadow: 0 14px 34px rgba(28, 57, 89, .07); }
.trust-strip { border-bottom-color: var(--line); }
/* 区块间距：大面积垂直内边距（py-28 → py-44）创造平静、有节奏的滚动体验。
   留白不是空白，而是引导注意力的精密工具。 */
.portal-section { padding-top: clamp(7rem, 10vw, 11rem); padding-bottom: clamp(7rem, 10vw, 11rem); }
.portal-feature-grid,
.organization-asset-grid { gap: var(--space-5); }
.catalog-card { min-height: 218px; padding: var(--space-6); }
.catalog-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(28, 57, 89, .09); }
.catalog-card h3 { margin-top: 20px; }
.catalog-card h3 a { color: var(--text); }
.catalog-meta { border-top-color: var(--line); }
.portal-process { background: var(--sidebar); }
.portal-process li { border-color: rgba(215, 225, 236, .16); background: rgba(255, 255, 255, .045); }
.catalog-layout { gap: calc(var(--space-1) * 9); }
.catalog-sidebar { top: 104px; }
.catalog-toolbar input,
.catalog-toolbar select { border-color: var(--line); background: #fff; }
.catalog-toolbar input:focus,
.catalog-toolbar select:focus { border-color: var(--interaction); box-shadow: 0 0 0 3px var(--interaction-ring); }
.public-asset-layout { gap: calc(var(--space-1) * 16); }
.trust-card,
.organization-trust-panel { border-color: var(--line); }
.portal-footer { border-top-color: var(--line); }

/* Authentication */
.auth-shell {
  background: var(--bg);
}
.auth-card { border-color: var(--line); box-shadow: 0 24px 58px rgba(28, 57, 89, .11); }
.auth-card h1 { color: var(--text); letter-spacing: 0; }
body[data-page="login"] .auth-card,
body[data-page="register"] .auth-card { width: min(440px, 100%); }

/* Internal dashboards, lists and governance */
.workspace-summary #overview-metrics {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.workspace-module { margin-bottom: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-padding); background: var(--surface); box-shadow: var(--shadow-sm); }
.workspace-module-head { display: flex; gap: var(--space-4); justify-content: space-between; align-items: end; margin-bottom: var(--space-4); }
.workspace-module-head h2 { margin: 2px 0 0; font-size: var(--text-xl); }
.workspace-module-head > a { color: var(--primary-strong); font-size: var(--text-sm); font-weight: 700; }
.workspace-module-head > span { color: var(--muted); font-size: var(--text-xs); }
.workspace-overview { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.workspace-overview-card { display: grid; gap: var(--space-2); min-height: 92px; align-content: center; border-right: 1px solid var(--line); padding: var(--panel-padding-compact); background: var(--gray-50); }
.workspace-overview-card:last-child { border-right: 0; }
/* 三行 KPI 的层级：标签(可读) > 数值(主) > 脚注(次)。
   原先 span 与 small 同为 12px，标签和脚注同权，读不出哪个是维度名。 */
.workspace-overview-card span { color: var(--text); font-size: var(--text-sm); font-weight: 700; }
.workspace-overview-card small { color: var(--muted); font-size: var(--text-xs); }
.workspace-overview-card strong { color: var(--text); font-family: var(--font-data); font-size: var(--text-2xl); line-height: 1.15; }
.workspace-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: var(--space-5); align-items: start; }
.workspace-todos-module, .workspace-recent-assets-module { grid-column: 1; }
.workspace-quick-module, .workspace-notifications-module { grid-column: 2; }
.workspace-todos-module { grid-row: 1; }
.workspace-quick-module { grid-row: 1; }
.workspace-recent-assets-module { grid-row: 2; }
.workspace-notifications-module { grid-row: 2; }
.workspace-todo-list, .workspace-recent-list, .workspace-notification-list { display: grid; gap: var(--space-2); }
.workspace-todo-item, .workspace-recent-item, .workspace-notification-item { display: flex; gap: var(--space-3); justify-content: space-between; align-items: center; min-height: 62px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-padding-compact) var(--space-5); color: var(--text); }
.workspace-todo-item:hover, .workspace-recent-item:hover, .workspace-notification-item:hover { border-color: var(--line-strong); background: var(--gray-50); }
.workspace-todo-item > span:first-child, .workspace-recent-item > span:nth-child(2), .workspace-notification-item > span { display: grid; min-width: 0; gap: var(--space-1); }
.workspace-todo-item small, .workspace-recent-item small, .workspace-notification-item small, .workspace-notification-item time { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.workspace-todo-item > span:last-child { color: var(--primary-strong); font-size: var(--text-xs); font-weight: 700; }
.workspace-todo-item.danger { border-left: 3px solid var(--danger); }
.workspace-todo-item.warning { border-left: 3px solid var(--warning); }
.workspace-recent-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.workspace-notification-item.unread { border-left: 3px solid var(--primary); background: var(--primary-soft); }
.workspace-quick-links { display: grid; gap: var(--space-2); }
.workspace-quick-link { display: grid; gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-padding-compact) var(--space-5); color: var(--text); }
.workspace-quick-link:hover { border-color: var(--primary-border); background: var(--primary-soft); }
.workspace-quick-link span, .workspace-role-summary span, .workspace-empty span { color: var(--muted); font-size: var(--text-xs); line-height: 1.6; }
.workspace-role-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.workspace-role-summary { display: grid; gap: var(--space-2); min-height: 92px; align-content: center; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); color: var(--text); background: var(--gray-50); }
.workspace-role-summary:hover { border-color: var(--primary-border); }
.workspace-empty { display: grid; gap: var(--space-2); min-height: 100px; align-content: center; justify-items: start; border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--space-4); }
.notification-center-link { display: block; border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4); color: var(--primary-strong); font-size: var(--text-xs); font-weight: 700; text-align: center; }
.notification-center { max-width: 1080px; }
.notification-center-toolbar { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); box-shadow: var(--shadow-sm); }
.notification-center-toolbar label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.notification-center-summary { display: flex; gap: var(--space-3); align-items: baseline; min-height: 38px; }
.notification-center-summary span { color: var(--muted); font-size: var(--text-xs); }
.notification-center-list { display: grid; gap: var(--space-3); }
.notification-center-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); box-shadow: var(--shadow-sm); }
.notification-center-item.unread { border-left: 3px solid var(--primary); }
.notification-center-item > a { display: grid; min-width: 0; gap: var(--space-2); color: var(--text); }
.notification-center-item p { color: var(--muted); line-height: 1.65; }
.notification-center-item small { color: var(--muted); font-size: var(--text-xs); }
.notification-type-label { width: fit-content; border-radius: 999px; padding: var(--space-1) var(--space-2); background: var(--primary-soft); color: var(--primary-strong); font-size: var(--text-xs); font-weight: 700; }
.overview-metrics { border-color: var(--line); box-shadow: var(--shadow-card); }
.overview-metric { min-height: 94px; border-color: var(--line); background: #fff; }
.overview-metric span { color: var(--muted); }
.overview-metric strong { color: var(--text); }
.feed-card,
.trending-item,
.governance-queue-item { border-color: var(--line); }
.feed-card:hover,
.governance-queue-item:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(28, 57, 89, .065); }
.governance-queue-item.active { border-color: var(--interaction-border); background: var(--interaction-soft); box-shadow: inset 2px 0 var(--interaction); }
body[data-page="governance"] .governance-detail > .surface { border-color: var(--line); }
.review-comment-field textarea { background: #fff; }
.review-action-bar { border-radius: 8px; }
.member-table,
.table-wrap { border-color: var(--line); }
.member-row,
.table-row,
.repository-file-row,
.invocation-audit-row,
.runtime-incident-row { border-color: var(--line); }
.organization-layout,
.governance-layout,
.asset-history-grid,
.settings-layout { gap: var(--space-5); }
.static-stepper,
.agent-stepper { border-color: var(--line); background: #fff; box-shadow: 0 4px 14px rgba(28, 57, 89, .04); }
.static-stepper button.active { color: var(--interaction-strong); background: var(--interaction-soft); }
.agent-stepper button.active { color: var(--agent-strong); background: var(--agent-soft); }

/* B2-02 Agent runtime density */
.agent-runtime-grid { gap: var(--space-5); margin-top: 20px; }
.runtime-status-card,
.runtime-policy-form,
.runtime-metrics-surface,
.invocation-audit-list { grid-column: 1 / -1; }
.runtime-status-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
}
.runtime-status-grid > div {
  min-height: 78px;
  align-content: center;
  gap: var(--space-2);
  border-color: var(--line);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
}
.runtime-status-grid span,
.runtime-metrics-grid span { color: var(--muted); }
.runtime-status-grid strong,
.runtime-metrics-grid strong { color: var(--text); }
.runtime-status-card > .credential-warning { margin: 0 22px 18px; }
.credential-warning { border-color: var(--info-border); background: var(--info-soft); color: var(--gray-600); }

.runtime-policy-form .runtime-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  padding: var(--space-5) var(--space-6) 0;
}
.runtime-policy-form .runtime-policy-grid > label {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.runtime-policy-form .runtime-policy-grid > .setting-row {
  display: flex;
  grid-column: 1 / -1;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-soft);
}
.runtime-policy-form .runtime-policy-grid > .setting-row span { min-width: 0; }
.runtime-policy-form .runtime-policy-grid > .setting-row input { flex: 0 0 18px; }
.runtime-policy-grid .policy-connection-field { grid-column: span 2; }
.runtime-policy-grid .policy-number-field { grid-column: span 1; }
.runtime-policy-grid .span-4 { grid-column: 1 / -1; }
.runtime-policy-form .form-actions { padding: var(--space-3) var(--space-6) var(--space-5); }
.runtime-metrics-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-6); }
.runtime-metrics-grid > div { min-height: 76px; align-content: center; background: var(--gray-50); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .runtime-status-grid,
  .runtime-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .runtime-policy-form .runtime-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-policy-grid .policy-connection-field,
  .runtime-policy-grid .policy-number-field { grid-column: span 1; }
  .organization-layout { grid-template-columns: 1fr; }
  .governance-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .workspace-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-overview-card:nth-child(3) { border-right: 0; }
  .workspace-overview-card:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .portal-nav { min-height: 64px; }
  .portal-hero { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .portal-hero h1 { font-size: 38px; }
  .portal-section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .auth-card { box-shadow: 0 18px 42px rgba(28, 57, 89, .1); }
  .surface-head { min-height: 58px; padding: var(--space-4) var(--space-4); }
  .workspace-summary #overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-summary .overview-metric:nth-child(2) { border-right: 0; }
  .workspace-summary .overview-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .runtime-status-grid,
  .runtime-metrics-grid,
  .runtime-policy-form .runtime-policy-grid { grid-template-columns: 1fr; padding-right: var(--space-4); padding-left: var(--space-4); }
  .runtime-policy-grid .policy-connection-field,
  .runtime-policy-grid .policy-number-field,
  .runtime-policy-grid .span-4 { grid-column: 1; }
  .runtime-status-card > .credential-warning { margin-right: 14px; margin-left: 14px; }
  .runtime-policy-form .runtime-policy-grid > .setting-row { padding: var(--space-3); }
  .runtime-policy-form .form-actions { padding: var(--space-3) var(--space-4) var(--space-5); }
  .governance-layout { grid-template-columns: 1fr; }
  .workspace-dashboard-grid { grid-template-columns: 1fr; }
  .workspace-todos-module, .workspace-quick-module, .workspace-recent-assets-module, .workspace-notifications-module { grid-column: 1; grid-row: auto; }
  .workspace-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-overview-card:nth-child(3) { border-right: 1px solid var(--line); }
  .workspace-overview-card:nth-child(2n) { border-right: 0; }
  .workspace-overview-card:nth-child(-n + 4) { border-bottom: 1px solid var(--line); }
  .workspace-module { padding: var(--space-4); }
  .workspace-module-head { align-items: flex-start; }
  .notification-center-toolbar { grid-template-columns: 1fr; }
  .notification-center-item { grid-template-columns: 1fr; }
  .notification-center-item > .button, .notification-center-item > .review-state { justify-self: start; }
}

/* Cross-platform typography hierarchy */
:where(button, input, select, textarea, table) {
  font-family: var(--font-body);
}

.brand strong,
.portal-brand strong,
.topbar-context strong,
.portal-hero h1,
.page-header h1,
.auth-card h1,
.surface-head h2,
.section-toolbar h2,
.trending-head h2,
.catalog-sidebar h1,
.public-asset-main h1,
.public-organization-hero h1,
.workspace-title-line h1 {
  font-family: var(--font-display);
  font-weight: 700;
}

.overview-metric strong,
.runtime-status-grid strong,
.runtime-metrics-grid strong,
.workspace-visits,
.trend-rank,
.step-index,
.repo-updated,
.organization-trust-panel dd,
.aside-stats strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

.hash-value,
.file-extension,
kbd,
input[name="apiBaseUrl"],
input[name="baseUrl"],
input[name="apiPath"],
input[name="modelName"],
input[name="toolName"] {
  font-family: var(--font-code);
}

/* 授权管理与试用额度（对外授权模型） */
.asset-grants-panel { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.grant-create-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); align-items: end; }
.grant-create-form label { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--muted); }
.grant-list { display: grid; gap: var(--space-2); }
.grant-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); }
.grant-row small { display: block; color: var(--muted); font-size: var(--text-xs); }
.grant-quota-banner { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--success-border); border-radius: var(--radius); background: var(--success-soft); color: var(--success-strong); font-size: var(--text-sm); }
.grant-quota-banner span { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: baseline; }
.grant-locked-note { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.grant-locked-note p { color: var(--muted); }
.access-path-list { display: grid; gap: var(--space-2); padding-left: var(--space-5); color: var(--muted); font-size: var(--text-sm); }
.auth-path-note { margin-top: var(--space-4); }
.review-summary-title { margin-top: var(--space-3); font-size: var(--text-base); }

/* 功能页面设计：公共首页、目录和统一成果详情 */
.portal-role-navigation { display: contents; }
.platform-goal { align-items: stretch; }
.portal-goal-search { margin-top: var(--space-6); }
.platform-capabilities { border-top: 1px solid var(--line); }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
/* 组件密度：卡片内部用更紧凑的间距，使其成为悬浮在大面积区块留白中的统一单元。 */
.capability-card { display: grid; align-content: start; min-height: 238px; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.capability-card > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-5); border-radius: var(--radius-sm); color: var(--primary); font-family: var(--font-data); font-size: var(--text-sm); font-weight: 700; }
.capability-card h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); }
.capability-card p { color: var(--muted); line-height: 1.7; }
.capability-card > div { align-self: end; margin-top: var(--space-5); }
.capability-card a { color: var(--primary-strong); font-weight: 700; }
/* 出口为空时（当前身份无对应权限）该卡片不是入口，
   收紧留白并去掉悬停反馈，避免与可点卡片长得完全一样。 */
.capability-card:has(> div[data-capability-action]:empty) { background: var(--surface-soft); box-shadow: none; }
.capability-card:has(> div[data-capability-action]:empty) > div { margin-top: 0; }

.catalog-page,
.public-asset-page {
  width: min(calc(100% - (var(--content-gutter-wide) * 2)), var(--page-max-width));
  margin: 0 auto;
}
.catalog-page { display: grid; gap: var(--space-5); padding: var(--space-8) 0 var(--space-10); }
.catalog-heading { max-width: 780px; }
.catalog-heading h1 { margin: var(--space-1) 0 var(--space-2); font-family: var(--font-display); font-size: 40px; }
.catalog-heading p:last-child { color: var(--muted); line-height: 1.75; }
.catalog-control-region { display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.catalog-control-title { display: flex; gap: var(--space-3); align-items: flex-start; }
.catalog-control-title > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); font-family: var(--font-data); font-weight: 700; }
.catalog-control-title h2 { margin: 0 0 4px; font-size: var(--text-lg); }
.catalog-control-title p { color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.catalog-search-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: var(--space-2); }
.catalog-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: var(--space-3); }
.catalog-filter-grid label, .catalog-sort-region label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.catalog-provider-field { display: grid; gap: var(--space-1); }
.catalog-provider-field > label { color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.catalog-custom-date-range { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); border-left: 3px solid var(--interaction-border); padding: var(--space-3) var(--space-4); background: var(--interaction-soft); }
.catalog-custom-date-range[hidden] { display: none; }
.catalog-filter-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); }
.catalog-results-section { display: grid; gap: var(--space-4); }
.catalog-result-heading { display: flex; justify-content: space-between; gap: var(--space-4); align-items: end; padding-top: var(--space-3); }
.catalog-result-heading h2 { margin: 0; font-size: var(--text-xl); }
.catalog-sort-region { min-width: 190px; }
.catalog-active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-height: 36px; color: var(--muted); font-size: var(--text-sm); }
.catalog-active-filters button { display: inline-flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--gray-50); color: var(--ink); opacity: 1; cursor: pointer; }
.catalog-active-filters button:hover { border-color: var(--interaction-border); background: var(--interaction-soft); }
.catalog-active-filters .catalog-clear-all { border-radius: var(--radius); background: var(--surface); color: var(--danger); }
.catalog-sort-summary { margin-left: auto; color: var(--ink); font-weight: 700; }
.catalog-page-numbers { display: inline-flex; gap: var(--space-1); align-items: center; }
.catalog-pagination .catalog-page-numbers button { min-width: 38px; }
.catalog-pagination .catalog-page-numbers button.active { border-color: var(--interaction); background: var(--interaction); color: white; }
.catalog-page-summary { color: var(--muted); font-size: var(--text-sm); }
.catalog-card { min-height: 310px; }
.catalog-card-top { justify-content: flex-start; flex-wrap: wrap; }
.catalog-card-top .visibility-chip { margin-left: auto; }
.catalog-subtype { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.catalog-keywords { display: flex; flex-wrap: wrap; gap: var(--space-1); min-height: 28px; margin-top: var(--space-3); }
.catalog-keywords span { border: 1px solid var(--line); border-radius: 999px; padding: var(--space-1) var(--space-2); background: var(--gray-50); color: var(--muted); font-size: var(--text-xs); }
.catalog-keywords.empty { color: var(--muted); font-size: var(--text-xs); }
.catalog-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.catalog-card-facts > span { display: grid; gap: var(--space-1); min-width: 0; }
.catalog-card-facts small { color: var(--muted); font-size: var(--text-xs); }
.catalog-card-facts strong, .catalog-card-facts a { overflow-wrap: anywhere; color: var(--ink); font-size: var(--text-sm); }
.catalog-card-link { align-self: flex-start; margin-top: auto; padding-top: var(--space-4); color: var(--interaction-strong); font-weight: 700; }
.catalog-empty-state { grid-column: 1 / -1; }

.public-asset-page { display: grid; gap: 0; padding: var(--space-8) 0 var(--space-10); }
.public-asset-header { display: flex; justify-content: space-between; gap: var(--space-5); align-items: end; padding-bottom: var(--space-5); }
.public-asset-header h1 { margin: var(--space-1) 0; font-family: var(--font-display); font-size: 38px; }
.public-asset-header p:last-child { color: var(--muted); }
.public-asset-tabs { margin-bottom: var(--space-4); }
.public-asset-panel { min-height: 320px; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.public-card-view { max-width: none; }
.capability-status-list { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.capability-status-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: var(--space-5); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); }
.capability-status-card h3 { margin: var(--space-2) 0; }
.capability-status-card p, .capability-status-card dd { color: var(--muted); line-height: 1.6; }
.capability-status-card dl { display: grid; gap: var(--space-2); }
.capability-status-card dt { color: var(--muted); font-size: var(--text-xs); }
.capability-state { display: inline-flex; padding: var(--space-1) var(--space-2); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.capability-state.granted { background: var(--success-soft); color: var(--success-strong); }
.capability-state.requestable { background: var(--info-soft); color: var(--info-strong); }
.capability-state.internal { background: var(--warning-soft); color: var(--warning-strong); }
.gateway-protected-badge { color: var(--primary-strong); font-size: var(--text-sm); font-weight: 700; }
.gateway-boundary-note { display: grid; gap: var(--space-1); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--primary); background: var(--primary-soft); }
.gateway-boundary-note span { color: var(--muted); font-size: var(--text-sm); }
.access-guidance { margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }

.asset-settings-operation { display: grid; gap: var(--space-4); padding: var(--panel-padding); }
.settings-operation-intro { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.settings-operation-intro h2 { margin: 2px 0 var(--space-1); }
.settings-operation-intro p:last-child { color: var(--muted); }
.asset-settings-conflict { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; margin: 0; padding: var(--space-4); border: 1px solid var(--warning-border); border-left: 4px solid var(--warning); border-radius: var(--radius); background: var(--warning-soft); }
.asset-settings-conflict[hidden] { display: none; }
.asset-settings-conflict > div:first-child { min-width: 0; }
.asset-settings-conflict p { margin-top: var(--space-1); color: var(--warning-strong); font-size: var(--text-sm); line-height: 1.6; }
.settings-secondary-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius); background: var(--gray-50); }
.settings-secondary-tabs button { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-weight: 700; }
.settings-secondary-tabs button.active { background: var(--surface); color: var(--primary-strong); box-shadow: var(--shadow-sm); }
.settings-secondary-panel { padding: var(--panel-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.readonly-fact-row { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--gray-50); color: var(--muted); font-size: var(--text-sm); }
.readonly-fact-row strong { color: var(--ink); overflow-wrap: anywhere; }
.logical-delete-panel { display: grid; gap: var(--space-4); max-width: 760px; }
.logical-delete-panel > div { padding: var(--space-4); border-left: 4px solid var(--danger); background: var(--danger-soft); }
.logical-delete-panel h2 { margin: 0 0 var(--space-2); }
.logical-delete-panel p { color: var(--muted); line-height: 1.65; }
.repo-row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
/* .compact-button 在列表行的标记里被使用，但此前没有对应规则，
   按钮回落到 .button 的 40px 默认高度。列表行内定义为 32px。 */
.button.compact-button { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); }

/* 七步成果创建：步骤、公开边界、预检与网关约束 */
.wizard-save-strip {
  display: flex;
  max-width: var(--page-max-width);
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  margin: 0 auto var(--space-4);
  border: 1px solid var(--info-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: var(--info-soft);
  color: var(--info-strong);
}
.wizard-save-strip span { font-weight: 700; }
.wizard-save-strip small { color: var(--muted); text-align: right; }
.seven-step-wizard {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  max-width: var(--page-max-width);
  gap: var(--space-5);
  align-items: start;
}
.seven-stepper {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-4));
  align-self: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: var(--space-2);
}
.seven-stepper button {
  width: 100%;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-1) var(--space-3);
  min-height: 70px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-3);
}
.seven-stepper button:last-child { border-bottom: 0; }
.seven-stepper button > span { grid-row: 1 / 3; }
.seven-stepper button.active { border-radius: calc(var(--radius) - 2px); }
.seven-stepper button[disabled]:not(.active) { opacity: .58; }
.seven-stepper button[disabled]:not(.active) strong { color: var(--muted); }
.seven-step-wizard .form-surface { min-width: 0; }
.wizard-panel { min-height: 620px; }
.wizard-panel .surface-head p { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.public-file-selection-list { gap: var(--space-3); padding: var(--space-5); }
.public-file-selection-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.public-file-selection-card.selected { border-color: var(--interaction-border); box-shadow: inset 3px 0 var(--interaction); }
.public-file-selection-card > .static-file-row { border: 0; border-radius: 0; }
.public-file-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--gray-50);
}
.public-file-options > label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.public-file-options > p { grid-column: 1 / -1; color: var(--muted); font-family: var(--font-code); font-size: var(--text-xs); }
.external-preview-card {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5);
  border: 1px solid var(--success-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--success-soft);
}
.external-preview-card > strong { color: var(--success-strong); }
.external-preview-card p, .external-preview-card span { color: var(--muted); line-height: 1.6; }
.preview-file-list { display: grid; gap: var(--space-1); }
.capability-card-list { display: grid; gap: var(--space-4); padding: var(--space-5); }
.capability-editor-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.capability-card-head {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--gray-50);
}
.capability-card-head h3 { margin: var(--space-1) 0 0; font-size: var(--text-lg); }
.capability-index { color: var(--agent-strong); font-family: var(--font-data); font-size: var(--text-xs); font-weight: 700; }
.capability-editor-card > .form-grid { padding-top: var(--space-5); }
.settings-capability-summary { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.settings-capability-summary > p { color: var(--muted); line-height: 1.65; }
.settings-capability-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.settings-capability-summary dl > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-padding-compact); background: var(--gray-50); }
.settings-capability-summary dt { margin-bottom: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.settings-capability-summary dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: var(--text-sm); line-height: 1.55; }
.settings-preview-audiences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.settings-preview-audiences article { display: grid; gap: var(--space-2); border: 1px solid var(--success-border); border-radius: var(--radius); padding: var(--panel-padding-compact); background: var(--surface); }
.settings-preview-audiences b { color: var(--success-strong); }
.settings-preview-audiences small { color: var(--muted); line-height: 1.55; }
.asset-chat { grid-template-rows: auto minmax(0, 1fr) auto; }
.asset-chat-composer { grid-template-columns: 1fr; gap: 0; padding: 0; }
.asset-chat-capability { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; padding: var(--panel-padding-compact) var(--panel-padding); background: var(--info-soft); color: var(--info-strong); font-size: var(--text-sm); font-weight: 700; }
.asset-chat-capability select { grid-row: 1 / 3; min-width: 0; }
.asset-chat-capability small { color: var(--muted); font-weight: 400; line-height: 1.55; }
.asset-chat-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--panel-padding-compact) var(--panel-padding); border-top: 1px solid var(--line); }
.asset-chat-input-row textarea { min-height: 72px; }
.asset-chat-input-row .button { min-width: 86px; }
.gateway-constraint-panel {
  margin: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--info-border);
  border-radius: var(--radius);
  background: var(--surface);
}
.gateway-constraint-panel > p { padding: 0 var(--space-5) var(--space-5); color: var(--muted); line-height: 1.7; }
.gateway-constraint-panel pre {
  margin: var(--space-4) var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--gray-900);
  color: var(--gray-100);
  font-family: var(--font-code);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.gateway-chain-list {
  counter-reset: gateway-step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  list-style: none;
}
.gateway-chain-list li {
  counter-increment: gateway-step;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--panel-padding-compact);
  background: var(--gray-50);
  color: var(--ink);
  font-size: var(--text-sm);
}
.gateway-chain-list li::before {
  content: counter(gateway-step);
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--info-soft);
  color: var(--info-strong);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 700;
}
.precheck-report { padding: var(--space-5); }
.precheck-summary {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.precheck-summary.passed { border-color: var(--success-border); background: var(--success-soft); color: var(--success-strong); }
.precheck-summary.failed { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.precheck-check-list { display: grid; gap: var(--space-2); }
.precheck-check {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}
.precheck-check > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; font-weight: 700; }
.precheck-check > div { display: grid; gap: var(--space-1); }
.precheck-check small { color: var(--muted); }
.precheck-check.passed > span { background: var(--success-soft); color: var(--success); }
.precheck-check.failed > span { background: var(--danger-soft); color: var(--danger); }

.organization-type-distribution,
.specification-support,
.specification-examples,
.specification-validation-report { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); background: var(--surface); box-shadow: var(--shadow-card); }
.organization-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.organization-type-grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--gray-50); }
.organization-type-grid a:hover { border-color: var(--interaction-border); background: var(--interaction-soft); }
.organization-type-grid span { color: var(--muted); font-size: var(--text-sm); }
.organization-type-grid strong { grid-row: 1 / 3; grid-column: 2; color: var(--interaction-strong); font-family: var(--font-data); font-size: var(--text-2xl); }
.organization-type-grid small { color: var(--interaction-strong); }
.specification-version-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.specification-version-grid article { display: grid; gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--gray-50); }
.specification-version-grid span,
.specification-version-grid small { color: var(--muted); font-size: var(--text-xs); }
.specification-version-grid strong { line-height: 1.6; }
.specification-support,
.specification-examples,
.specification-validation-report { margin: 0 var(--space-5) var(--space-5); box-shadow: none; }
.specification-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.specification-chip-list span { border: 1px solid var(--interaction-border); border-radius: 999px; padding: var(--space-1) var(--space-3); background: var(--interaction-soft); color: var(--interaction-strong); font-size: var(--text-sm); }
.specification-example-list,
.specification-result-list { display: grid; gap: var(--space-2); }
.specification-example-list article,
.specification-result-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.specification-example-list article:first-child,
.specification-result-list article:first-child { border-top: 0; }
.specification-result-list small { color: var(--muted); }
.specification-asset-validation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; margin: 0 var(--space-5) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--gray-50); }
.specification-asset-validation label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.specification-validation-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.specification-target-note { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-sm); }
.agent-content-nav { display: flex; gap: var(--space-2); overflow-x: auto; border-bottom: 1px solid var(--line); padding: var(--space-3) var(--space-5); background: var(--gray-50); }
.agent-content-nav button { flex: 0 0 auto; border: 0; border-radius: calc(var(--radius) - 2px); padding: var(--space-2) var(--space-4); background: transparent; color: var(--muted); font-weight: 700; }
.agent-content-nav button.active { background: var(--surface); color: var(--interaction-strong); box-shadow: var(--shadow-sm); }
.agent-content-panel { min-height: 0; }
.agent-trial-responsibility { display: grid; gap: var(--space-1); margin: var(--space-4) var(--space-5) 0; border: 1px solid var(--warning-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--warning-soft); color: var(--warning-strong); }
.agent-trial-responsibility small { color: var(--muted); }
.agent-grant-boundary { margin: 0; padding: 0 var(--space-5) var(--space-4); color: var(--muted); line-height: 1.7; }
.agent-grant-request-list { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.agent-grant-request { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }
.agent-grant-request > div:first-child { display: grid; gap: var(--space-2); align-content: start; }
.agent-grant-request h3,
.agent-grant-request p { margin: 0; }
.agent-grant-request p,
.agent-grant-request small { color: var(--muted); line-height: 1.6; }
.agent-grant-request form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.agent-grant-request form label { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.agent-grant-decision-note { border-left: 3px solid var(--line-strong); padding: var(--space-3) var(--space-4); color: var(--muted); }
.active-grant-list { border-top: 1px solid var(--line); padding: var(--space-5); }
.owner-metric-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.owner-metric-summary article { display: grid; gap: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--gray-50); }
.owner-metric-summary span { color: var(--text); font-size: var(--text-sm); font-weight: 700; }
.owner-metric-summary small { color: var(--muted); font-size: var(--text-xs); }
.owner-metric-summary strong { color: var(--interaction-strong); font-family: var(--font-data); font-size: var(--text-2xl); line-height: 1.15; }
.owner-metric-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.owner-metric-detail-grid > section { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }
.owner-metric-asset-list,
.owner-metric-trend { display: grid; gap: var(--space-2); }
.owner-metric-asset-list a,
.owner-metric-trend > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.owner-metric-asset-list a:first-child,
.owner-metric-trend > div:first-child { border-top: 0; }
.owner-metric-asset-list a > span:first-child { display: grid; gap: var(--space-1); }
.owner-metric-asset-list small,
.owner-metric-asset-list a > span:last-child,
.owner-metric-trend span { color: var(--muted); font-size: var(--text-xs); }
.owner-metric-trend > div { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
.owner-metric-trend time { color: var(--ink); font-family: var(--font-data); font-size: var(--text-xs); }
.owner-metric-events { margin-top: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }
.owner-metric-events > div:last-child { display: grid; gap: var(--space-2); }
.owner-metric-events a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.owner-metric-events a:first-child { border-top: 0; }
.owner-metric-events small { color: var(--muted); font-size: var(--text-xs); }

/* Intake guide: persistent business-oriented navigation and readable steps */
.intake-guide-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  width: min(calc(100% - 48px), var(--page-narrow-width));
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-8);
}
.intake-guide-nav {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-4));
  display: grid;
  gap: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.intake-guide-nav .section-kicker { margin: 0 0 var(--space-2); padding: 0 var(--space-2); }
.intake-guide-nav a {
  border-radius: calc(var(--radius) - 2px);
  padding: var(--space-2) var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.intake-guide-nav a:hover,
.intake-guide-nav a:focus-visible { background: var(--interaction-soft); color: var(--interaction-strong); }
.intake-guide-content { display: grid; gap: var(--space-5); min-width: 0; }
.intake-guide-hero {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-7);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .09), transparent 54%),
    var(--surface);
  box-shadow: var(--shadow-card);
}
.intake-guide-hero h1 { max-width: 760px; margin-bottom: var(--space-3); font-size: clamp(26px, 3.5vw, 38px); line-height: 1.22; }
.intake-guide-hero > p:not(.eyebrow) { max-width: 760px; color: var(--muted); line-height: 1.8; }
.intake-guide-hero .row-actions { margin-top: var(--space-5); }
.guide-section {
  scroll-margin-top: calc(var(--topbar-height) + var(--space-5));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.guide-section > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--interaction-soft);
  color: var(--interaction-strong);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 700;
}
.guide-section > div { min-width: 0; }
.guide-section h2 { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-2xl); line-height: 1.35; }
.guide-section h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.guide-section p,
.guide-section li { color: var(--muted); line-height: 1.75; }
.guide-section ul,
.guide-section ol { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding-left: var(--space-6); }
.guide-section li strong { color: var(--ink); }
.guide-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.guide-comparison article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--gray-50);
}
.guide-comparison article > strong { display: block; margin: var(--space-4) 0 var(--space-1); color: var(--ink); font-size: var(--text-sm); }
.guide-comparison article p:last-child { margin-bottom: 0; }
.guide-example,
.guide-warning { margin-top: var(--space-4); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.guide-example { border: 1px solid var(--info-border); background: var(--info-soft); }
.guide-example strong { color: var(--info-strong); }
.guide-example p { margin: var(--space-1) 0 0; color: var(--ink); }
.guide-warning { border: 1px solid var(--warning-border); background: var(--warning-soft); color: var(--warning-strong) !important; }
.guide-error-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.guide-error-list article { border-left: 3px solid var(--warning); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-3) var(--space-4); background: var(--gray-50); }
.guide-error-list article strong { color: var(--ink); }
.guide-error-list article p { margin: var(--space-1) 0 0; }
.guide-download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.guide-download-grid a {
  display: grid;
  gap: var(--space-1);
  border: 1px solid var(--interaction-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--interaction-soft);
  color: var(--interaction-strong);
}
.guide-download-grid a:hover,
.guide-download-grid a:focus-visible { border-color: var(--interaction); background: var(--surface); }
.guide-download-grid span { color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }

.public-agent-experience {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.public-agent-experience .asset-panel-head { min-width: 0; }
.public-capability-summary { min-width: 0; }
.capability-example { display: grid; gap: var(--space-1); margin-top: var(--space-3); border-left: 3px solid var(--interaction); padding: var(--space-2) var(--space-3); background: var(--interaction-soft); }
.capability-example small { color: var(--muted); }
.capability-example strong { overflow-wrap: anywhere; color: var(--interaction-strong); font-size: var(--text-sm); line-height: 1.55; }
.public-capability-boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.public-capability-boundary-grid > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-padding-compact); background: var(--gray-50); }
.public-capability-boundary-grid dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.capability-state.paused { background: var(--warning-soft); color: var(--warning-strong); }
.public-agent-header-actions { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.public-agent-quota { display: grid; min-width: 120px; text-align: right; }
.public-agent-quota strong { color: var(--success-strong); font-size: var(--text-sm); }
.public-agent-quota small { color: var(--muted); font-size: var(--text-xs); }
.public-agent-lock { display: grid; gap: var(--space-2); margin: var(--space-4) var(--space-5) 0; border: 1px solid var(--info-border); border-radius: var(--radius); padding: var(--space-4); background: var(--info-soft); }
.public-agent-lock p { margin: 0; color: var(--muted); line-height: 1.6; }
.public-agent-lock .button { justify-self: start; }
.public-agent-lock.warning { border-color: var(--warning-border); background: var(--warning-soft); }
.public-agent-lock.success { border-color: var(--success-border); background: var(--success-soft); }
.public-agent-grant-form { display: grid; gap: var(--space-3); margin: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--gray-50); }
.public-agent-grant-form > label:not(.setting-row) { display: grid; gap: var(--space-1); color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.public-agent-grant-form textarea { min-height: 96px; }
.redirect-page { display: grid; min-height: 100vh; place-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-5); text-align: center; }
.redirect-page p { color: var(--muted); }

/* ============================================================
   现代极简主义迁移（docs/design-system.zh-CN.md）
   只改表现层：不新增 DOM、不改文案、不动 app.js / server。
   放在响应式断点之前，让移动端规则仍然后置生效。
   ============================================================ */

/* —— 1. 卡片：纯白表面 + 1px 描边 + 分层阴影 ——
   设计系统的卡片默认 shadow-md，悬停加深到 shadow-xl，
   靠「抬升」而非重描边表达层次。 */
.feed-card,
.catalog-card,
.capability-card,
.workspace-module,
.trending-panel,
.my-results-filter-grid,
.notification-center-toolbar,
.notification-center-item,
.governance-user-card,
.result-repo-row,
.trust-card,
.portal-proof,
.agent-stepper,
.static-stepper {
  border-radius: var(--radius-lg);
}
.trending-panel,
.my-results-filter-grid,
.notification-center-toolbar,
.notification-center-item,
.governance-user-card,
.workspace-module {
  box-shadow: var(--shadow-sm);
}
/* 卡中卡不再各自带投影：概念图里第二层一律是浅灰填充或一条分隔线。 */
.surface .surface,
.workspace-module .surface,
.capability-card .surface,
.settings-secondary-panel {
  box-shadow: none;
}

/* —— 2. 药丸化徽章，并把「归类」与「状态」分成两档 ——
   概念图里状态用绿/橙/红，归类用中性与蓝紫；现有站点两者共用一套色，
   看一眼分不清「这是类型」还是「这里出事了」。 */
.type-badge,
.status-pill,
.role-chip,
.mini-type,
.recommend-label,
.visibility-chip,
.asset-row-status,
.review-state,
.capability-state,
.notification-type-label,
.certification-badge {
  border-radius: var(--radius-pill);
}
/* 常规徽章加宽左右内边距以撑出药丸形，
   但 .mini-type 是列表行首的紧凑标记（min-height 18px），
   加宽会挤压同行的标题列，在 390px 宽下把长成果名挤出容器。 */
.type-badge,
.status-pill,
.role-chip,
.recommend-label,
.visibility-chip,
.asset-row-status,
.review-state,
.capability-state,
.notification-type-label,
.certification-badge {
  padding-right: var(--space-3);
  padding-left: var(--space-3);
}
/* 归类徽章（成果类型 / 角色 / 推荐位）：中性与蓝系，绝不使用绿或红。 */
.type-badge { background: var(--info-soft); color: var(--info-strong); }
.role-chip { background: var(--neutral-status-soft); color: var(--neutral-status); }
.catalog-subtype {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  background: var(--gray-100);
  color: var(--gray-600);
  font-weight: 500;
}

/* —— 3. 元信息条 ——
   概念图 03/06/07 的页头共用同一构造：标题 → 一行「小号灰标签 + 深色值」，
   条目以细竖线分隔、无重底色，让正文立刻开始。
   站点里承担这一角色的是 .readonly-fact-row（成果设置区的只读事实行）。
   （.detail-meta / .detail-hero 在当前 app.js 与 html 中均无引用，不在此处附着规则。） */
.readonly-fact-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  line-height: var(--meta-leading);
}
.readonly-fact-row strong { font-weight: 700; }

/* —— 4. KPI：标签在上、数值超大且最重、组内竖线分隔 ——
   概念图 05 的数值比标签大 2–3 档；现有站点数值 24px、标签 14px 加粗，
   两者权重接近，扫视时读不出主次。 */
.workspace-overview-card { gap: var(--space-1); }
.workspace-overview-card span { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.workspace-overview-card strong { font-size: var(--text-3xl); font-weight: 700; letter-spacing: 0; }
.overview-metric strong { font-size: var(--text-2xl); }
/* 数值承载语义时才着色，其余保持墨色，避免整排 KPI 五颜六色。 */
.overview-metric.primary strong { color: var(--brand-strong); }

/* —— 5. 七步向导的步骤条：明确三态 ——
   概念图 04 是「已完成=绿描边圆+勾 / 当前=实心圆+数字 / 未开始=灰描边圆+数字」。
   站点里 app.js 只维护 .active 与 disabled，二者组合已足以表达三态，
   因此纯 CSS 即可，无需新增类名或改动 showStaticStep()。 */
.seven-stepper button > span,
.agent-stepper button > span,
.static-stepper button > span {
  border-radius: 50%;
  font-family: var(--font-data);
}
/* 已解锁但非当前 = 已完成：绿描边 + 绿字 + 绿勾。 */
.seven-stepper button:not(:disabled):not(.active) > span {
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.seven-stepper button:not(:disabled):not(.active) > span::after {
  content: "✓";
  font-size: var(--text-sm);
}
.seven-stepper button:not(:disabled):not(.active) > span { font-size: 0; }
.seven-stepper button:not(:disabled):not(.active) strong { color: var(--text); }
/* 当前节点：实心藏青，与概念图一致——当前步骤属于「你在哪」而非「成功」。 */
.static-stepper button.active > span,
.seven-stepper button.active > span {
  border-color: var(--sidebar);
  background: var(--sidebar);
  color: #fff;
}
.seven-stepper button.active {
  background: var(--surface-soft);
  box-shadow: inset 3px 0 var(--brand);
}
/* 未开始：灰描边灰底，弱化但仍可读（原先整块 opacity .58 连标题一起压暗）。 */
.seven-stepper button[disabled]:not(.active) { opacity: 1; }
.seven-stepper button[disabled]:not(.active) > span {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--muted-soft);
}
.seven-stepper button[disabled]:not(.active) small { color: var(--muted-soft); }

/* —— 6. 深色侧栏选中态：左侧亮条 + 浅高亮块 ——
   概念图 05/06/08 的选中项不是整块反白，而是一条亮色竖条领着一块淡高亮。 */
/* —— 7. Tab 下划线 ——
   概念图 03/07 的 tab 是「加粗文字 + 2px 下划线」，选中色随语境走品牌绿。 */
.asset-workspace-tabs button.active { color: var(--brand-strong); }
.asset-workspace-tabs button.active::after { background: var(--brand); }

/* —— 8. 门户：Hero 与能力卡 ——
   概念图 01 的能力卡有「实心圆角方块图标 + 标题 + 说明 + 右下箭头」。
   站点的 .capability-card > span 是 01..06 序号，把它做成同尺寸的方块标记，
   形状与尺寸统一，颜色仍走单一品牌色（概念图里颜色不统一，不抄）。 */
.capability-card { border-radius: var(--radius-lg); }
.capability-card > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
/* 序号方块 / 小节记号是同一套记号：同尺寸圆角方块。
   填色不在这里定，交由后面的「渐变图标背景」统一处理，
   避免同一属性在两处被声明。 */
.portal-brand > span { border-radius: var(--radius-sm); }
.portal-search { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.portal-nav nav a { border-radius: var(--radius-sm); }

/* —— 9. 目录页：已选条件药丸、结果卡、分页 ——
   概念图 02 把已生效条件做成一排可删除药丸，当前页码是实心方块。 */
.catalog-active-filters button { border-radius: var(--radius-pill); }
.catalog-active-filters .catalog-clear-all { border-radius: var(--radius-pill); }
.catalog-keywords span { border-radius: var(--radius-pill); }

/* —— 10. 审核决策：两个互斥动作做成大号描边按钮 ——
   「通过 / 驳回」是两个等宽大按钮，各据一方，
   而不是一排同样大小的小按钮。只作用于审核操作条内已有的按钮。 */
.review-action-bar { border-radius: var(--radius-lg); }
.review-action-bar .button.danger {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger-strong);
}
.review-action-bar .button.danger:hover { border-color: var(--danger); background: #fff; }
.review-check { border-radius: var(--radius); }

/* —— 11. 全宽警示条 ——
   概念图 08 顶部是「浅底 + 图标 + 粗体规则 + 右侧解释」的一条通栏。
   站点已有 .asset-settings-conflict / .credential-warning 承担同一角色。 */
.asset-settings-conflict { border-radius: var(--radius-lg); }
.credential-warning { border-radius: var(--radius); font-size: var(--text-xs); }
.gateway-boundary-note { border-radius: 0 var(--radius) var(--radius) 0; }

/* —— 12. 圆角收口 ——
   填色与状态语义交由后面的「主色收口」统一处理，这里只留形状。 */
.workspace-quick-link,
.workspace-role-summary,
.workspace-empty { border-radius: var(--radius-lg); }
.static-file-dropzone { border-radius: var(--radius-lg); }

@media (max-width: 1100px) {
  .catalog-page,
  .public-asset-page { width: min(calc(100% - (var(--content-gutter-medium) * 2)), var(--page-max-width)); }
  .seven-step-wizard { grid-template-columns: 1fr; }
  .seven-stepper {
    position: static;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    overflow-x: auto;
  }
  .seven-stepper button { min-height: 74px; border-right: 1px solid var(--line); border-bottom: 0; }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-control-region { grid-template-columns: 1fr; }
  .catalog-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-pagination { flex-wrap: wrap; }
  .catalog-page-summary { order: 3; flex-basis: 100%; text-align: center; }
  .capability-status-card { grid-template-columns: 1fr; }
  .specification-version-grid,
  .specification-validation-layers,
  .owner-metric-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-metric-detail-grid,
  .agent-grant-request { grid-template-columns: 1fr; }
  .intake-guide-layout { grid-template-columns: 1fr; }
  .intake-guide-nav {
    position: static;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    overflow-x: auto;
  }
  .intake-guide-nav .section-kicker { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .portal-nav { min-height: 64px; }
  .catalog-page,
  .public-asset-page { width: min(calc(100% - (var(--content-gutter-compact) * 2)), var(--page-max-width)); }
  .wizard-save-strip { align-items: flex-start; flex-direction: column; }
  .wizard-save-strip small { text-align: left; }
  .public-file-options, .gateway-chain-list, .settings-capability-summary dl, .settings-preview-audiences { grid-template-columns: 1fr; }
  .capability-card-head { align-items: flex-start; }
  .precheck-summary { align-items: flex-start; flex-direction: column; }
  .precheck-check { grid-template-columns: 32px minmax(0, 1fr); }
  .precheck-check .text-button { grid-column: 2; justify-self: start; }
  .asset-chat-capability, .asset-chat-input-row { grid-template-columns: 1fr; padding-right: var(--panel-padding-compact); padding-left: var(--panel-padding-compact); }
  .asset-chat-capability select { grid-row: auto; }
  .capability-grid, .catalog-filter-grid { grid-template-columns: 1fr; }
  .catalog-custom-date-range, .catalog-card-facts { grid-template-columns: 1fr; }
  .catalog-page-numbers { order: 3; width: 100%; justify-content: center; }
  .catalog-page-summary { order: 4; }
  .catalog-search-form { grid-template-columns: 1fr; }
  .catalog-result-heading, .public-asset-header { align-items: stretch; flex-direction: column; }
  .catalog-sort-region { min-width: 0; }
  .public-asset-panel, .settings-secondary-panel { padding: var(--space-4); }
  .asset-settings-operation { padding: var(--panel-padding-compact); }
  .surface-head,
  .form-grid,
  .asset-panel-head,
  .asset-card-description,
  .asset-chat-messages { padding-right: var(--panel-padding-compact); padding-left: var(--panel-padding-compact); }
  .asset-card-facts { padding-right: var(--panel-padding-compact); padding-bottom: var(--panel-padding-compact); padding-left: var(--panel-padding-compact); }
  .public-capability-boundary-grid { grid-template-columns: 1fr; }
  .public-agent-header-actions { align-items: flex-start; flex-direction: column; }
  .public-agent-quota { min-width: 0; text-align: left; }
  .public-agent-lock,
  .public-agent-grant-form { margin: var(--space-3); }
  .readonly-fact-row { grid-template-columns: 1fr; }
  .repo-row-actions { justify-content: flex-start; }
  .intake-guide-layout { width: min(calc(100% - 24px), var(--page-narrow-width)); padding-top: var(--space-4); }
  .intake-guide-nav { grid-template-columns: repeat(8, minmax(170px, 1fr)); padding: var(--space-2); }
  .intake-guide-nav .section-kicker { display: none; }
  .intake-guide-hero,
  .guide-section { padding: var(--space-4); }
  .guide-section { grid-template-columns: 1fr; }
  .guide-section h2 { font-size: var(--text-xl); }
  .guide-comparison,
  .guide-error-list,
  .guide-download-grid { grid-template-columns: 1fr; }
  .organization-type-grid,
  .specification-asset-validation { grid-template-columns: 1fr; }
  .specification-example-list article,
  .specification-result-list article { grid-template-columns: 1fr; }
  .owner-metric-summary,
  .agent-grant-request form { grid-template-columns: 1fr; }
  .owner-metric-trend > div { grid-template-columns: 1fr 1fr; }
  .owner-metric-events a { grid-template-columns: 1fr; }

  /* 移动端不是把桌面内容重排成一列，而应裁剪为可扫的子集。
     明细/趋势/变更这三段在窄屏会累积到 3800px 以上，
     这里限高为可滚动区域，页面主干保持可导航；内容与顺序不变。 */
  .owner-metric-asset-list,
  .owner-metric-trend,
  .owner-metric-events > div:last-child { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
  .owner-metric-summary { gap: var(--space-2); }
  .owner-metric-summary article { padding: var(--space-3); }
  /* KPI 数值在窄屏无需与桌面同号 */
  .workspace-overview-card { min-height: 76px; padding: var(--space-3); }
  .workspace-overview-card strong { font-size: var(--text-xl); }
}

/* ============================================================
   现代极简主义 · 标志性元素（「大胆系数」）
   docs/design-system.zh-CN.md
   ------------------------------------------------------------
   这一层承载设计系统里「防止产出通用化」的部分：渐变文字、
   反转区块、纹理、脉冲指示器、双字体排印和入场动画。
   放在全部既有规则之后，因此无需 !important 即可收口。
   ============================================================ */

/* —— A. 双字体排印 ——
   Calistoga（展示）负责标题的「个性」，Inter 负责正文的「清晰」。
   等宽字体（JetBrains Mono）用于区块标签与技术提示，注入高科技感。
   展示字体只用于 h1/h2 级标题：用得太散会稀释它的分量。 */
.portal-hero h1,
.public-asset-main h1,
.public-organization-hero h1,
.catalog-heading h1,
.catalog-sidebar h1,
.public-asset-header h1,
.auth-card h1,
.page-header h1,
.workspace-title-line h1,
.portal-section h2,
.portal-section-head h2,
.intake-guide-hero h1,
.guide-section h2,
.catalog-control-title h2,
.portal-proof strong {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* 卡片标题保持 Inter 半粗体 + 紧凑字距，提高信息密度。
   这是「个性 ↔ 精准」对话里「精准」的一半。 */
.feed-title,
.catalog-card h3,
.capability-card h3,
.showcase-body h2,
.surface-head h2,
.surface-head h3,
.section-toolbar h2,
.trending-head h2,
.asset-panel-head h2,
.workspace-module-head h2,
.trust-card h2,
.modal h2 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 区块标签（徽章）：等宽、全大写、宽字距。
   站点里 .eyebrow / .section-kicker 承担这一角色（共约 50 处）。 */
.eyebrow,
.section-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* —— B. 区块标签系统 ——
   设计系统要求每个主要区块以统一徽章开场：圆角胶囊 + 脉冲圆点 +
   大写等宽文字。站点的 .eyebrow 是裸文字，这里把门户与公开页面的
   那一档升级为真正的胶囊徽章（纯 CSS，不动 DOM）。 */
.portal-hero .eyebrow,
.portal-section-head .eyebrow,
.catalog-heading .eyebrow,
.public-organization-hero .eyebrow,
.intake-guide-hero .eyebrow,
.public-asset-header .eyebrow,
.auth-card .eyebrow {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  background: rgba(0, 82, 255, .05);
  color: var(--accent);
}
/* 脉冲圆点：表示「实时 / 最新」。缩放与透明度同步呼吸，
   2 秒一轮——慢到近乎下意识。 */
.portal-hero .eyebrow::before,
.portal-section-head .eyebrow::before,
.catalog-heading .eyebrow::before,
.public-organization-hero .eyebrow::before,
.intake-guide-hero .eyebrow::before,
.public-asset-header .eyebrow::before,
.auth-card .eyebrow::before {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: accent-pulse 2s ease-in-out infinite;
  content: "";
}
@keyframes accent-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.3); }
}

/* —— C. 渐变文字高亮 ——
   标题中的关键词用标志性渐变作为文字颜色。站点标题是整段中文、
   没有可挂钩的 <span>，所以把 Hero 标题的最后一个语义块交给
   ::first-line 之外的方案不可行；改为对门户 Hero 的强调词容器
   与所有 <em>/<b class="gradient-text"> 生效，并提供工具类。 */
.gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 渐变下划线条：给 Hero 标题的关键词垫一条半透明渐变，
   比纯下划线更有维度感。 */
.gradient-underline {
  position: relative;
  display: inline-block;
}
.gradient-underline::after {
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  left: 0;
  z-index: -1;
  height: 0.75rem;
  border-radius: 0.125rem;
  background: linear-gradient(to right, rgba(0, 82, 255, .15), rgba(77, 124, 255, .1));
  content: "";
}

/* —— D. 反转对比区块 ——
   深石板底 + 浅色文字，配点阵纹理。用于制造滚动节奏、避免浅色主题显得单调，
   并形成自然的区块间隔而无需厚重分隔线。
   设计系统要求「至少一个区块」使用反转配色。门户里最适合的是「平台赋能」
   六卡区：它位于 Hero 之后、精选成果之前，反转后正好把页面切成
   「亮 → 暗 → 亮」的节奏；而精选区承载白色成果卡，不适合反转。
   （原有的 .portal-process 规则是死代码——该类名在 html 与 app.js 中均无渲染。） */
.platform-capabilities {
  position: relative;
  overflow: hidden;
  border-top: 0;
  background: var(--sidebar);
  color: var(--sidebar-text-strong);
}
/* 点阵图案：32px 间隔、极低透明度。用户不会有意识注意到它，
   但会觉得这块深色比纯色「更有质感」。 */
.platform-capabilities::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  content: "";
}
/* 径向光晕：角落一枚大尺寸模糊强调色圆，营造环境光般的温暖。 */
.platform-capabilities::after {
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 255, .18), transparent 70%);
  pointer-events: none;
  content: "";
}
.platform-capabilities > * { position: relative; z-index: 1; }
.platform-capabilities .portal-section-head > div > p:not(.eyebrow) { color: rgba(255, 255, 255, .72); }
.platform-capabilities .eyebrow {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #a8c4ff;
}
.platform-capabilities .eyebrow::before { background: #a8c4ff; }
/* 反转区块内的卡片：半透明白而非实白，否则会打断反转的戏剧性。 */
.platform-capabilities .capability-card {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--sidebar-text-strong);
  box-shadow: none;
}
.platform-capabilities .capability-card p { color: rgba(255, 255, 255, .7); }
.platform-capabilities .capability-card h3 { color: var(--sidebar-text-strong); }
.platform-capabilities .capability-card a { color: #a8c4ff; }
.platform-capabilities .capability-card:hover {
  border-color: rgba(168, 196, 255, .42);
  background: rgba(255, 255, 255, .07);
}
/* 出口为空的卡片在深底上用更低的填充表达「非入口」，而不是换成浅灰。 */
.platform-capabilities .capability-card:has(> div[data-capability-action]:empty) {
  background: rgba(255, 255, 255, .02);
  box-shadow: none;
}
/* 深色区块里的渐变文字改用更亮的一档，否则 #0052ff 在深底上读不出来。 */
.platform-capabilities .gradient-text {
  background: linear-gradient(to right, #a8c4ff, #d6e2ff);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 深色侧栏同样铺一层点阵，与反转区块共用同一套纹理语言。 */
.sidebar::after {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  content: "";
}
.sidebar { position: relative; }
.sidebar::after { z-index: 0; }
.sidebar > * { position: relative; z-index: 1; }

/* —— E. 径向光晕 ——
   区块角落放置大尺寸、极低透明度的强调色圆，营造环境光般的温暖。
   Hero 与最终 CTA 是最值得加这层氛围的地方。 */
.portal-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.portal-hero::before {
  position: absolute;
  top: -18%;
  right: -8%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 255, .08), transparent 68%);
  pointer-events: none;
  content: "";
}
.portal-hero::after {
  position: absolute;
  bottom: -30%;
  left: -12%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 124, 255, .07), transparent 70%);
  pointer-events: none;
  content: "";
}
.portal-hero > * { position: relative; z-index: 1; }

.public-organization-hero,
.auth-shell {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.public-organization-hero::before,
.auth-shell::before {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 255, .07), transparent 70%);
  pointer-events: none;
  content: "";
}
.public-organization-hero > *,
.auth-shell > * { position: relative; z-index: 1; }

/* —— F. 非对称与视觉张力 ——
   1.1fr / 0.9fr 让文字列略占主导。完美对称是可预测的；
   策略性非对称创造视觉趣味。 */
.portal-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: center;
}
.portal-hero h1 {
  font-size: clamp(2.75rem, 5.4vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.portal-section h2,
.portal-section-head h2 { line-height: 1.15; }

/* 优势区：内容优先于视觉元素。 */
.public-asset-layout { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }

/* —— G. 卡片：分层阴影与悬停抬升 ——
   默认 shadow-md，悬停 shadow-xl + 抬升，并淡入一层极淡的
   强调色渐变叠层（3%）。叠层比换底色更含蓄。 */
.catalog-card,
.capability-card,
.showcase-card,
.feed-card,
.trust-card,
.portal-proof,
.workspace-module,
.governance-user-card,
.notification-center-item,
.capability-editor-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-lift), box-shadow var(--transition-lift), transform var(--transition-lift);
}
.catalog-card:hover,
.showcase-card:hover,
.feed-card:hover,
.trust-card:hover {
  border-color: var(--primary-line-faint);
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}
/* 渐变叠层淡入：from-accent/3 到透明，落在卡片自身圆角内。 */
.catalog-card::after,
.showcase-card::after,
.capability-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom right, rgba(0, 82, 255, .03), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-lift);
  content: "";
}
.catalog-card:hover::after,
.showcase-card:hover::after,
.capability-card:hover::after { opacity: 1; }
.catalog-card > *,
.showcase-card > *,
.capability-card > * { position: relative; z-index: 1; }

/* —— H. 渐变图标背景 ——
   功能图标用完整渐变背景而非半透明填充。这是设计系统明确点名的
   「大胆系数」之一：半透明填充是安全的，实心渐变才是有立场的。
   站点里的序号方块 / 图标容器共有四处，统一到同一处理。 */
.capability-card > span,
.step-index,
.guide-section > span,
.catalog-control-title > span,
.brand-mark,
.portal-brand > span,
.workspace-mark,
.repo-type-icon,
.file-extension,
.asset-identity {
  border: 0;
  background: var(--gradient-accent-surface-diagonal);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-accent);
}
.capability-card > span,
.catalog-control-title > span,
.step-index,
.guide-section > span {
  font-family: var(--font-mono);
  font-weight: 500;
}
/* 图标随卡片悬停缩放——「鲜活」的一部分。 */
.capability-card > span,
.guide-section > span { transition: transform var(--transition-lift); }
.capability-card:hover > span,
.guide-section:hover > span { transform: scale(1.1); }
/* 深色侧栏里的品牌标记不需要额外的强调色阴影（底色已是深石板）。 */
.sidebar .brand-mark { box-shadow: none; }
/* 状态型底色不应被渐变覆盖：这些类同时表达「类型」与「运行态」。 */
.asset-identity.agent { background: var(--gradient-accent-surface-diagonal); color: var(--accent-foreground); }

/* —— I. 渐变边框效果（2px 描边技巧）——
   高亮元素用 2px 渐变描边。原文用嵌套 div 实现，
   这里用 border-image 达到同样效果且无需改 DOM。 */
.public-file-selection-card.selected,
.governance-queue-item.active,
.catalog-pagination .catalog-page-numbers button.active {
  border: 2px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--gradient-accent-diagonal) border-box;
  box-shadow: var(--shadow-accent);
}
.catalog-pagination .catalog-page-numbers button.active {
  background: var(--gradient-accent-surface-diagonal);
  color: var(--accent-foreground);
}

/* —— J. 大型装饰元素 ——
   设计系统要求「120px 的引号、text-4xl 的步骤编号」这类大尺度记号。
   站点的 KPI 数值是最接近的载体：把它放大到真正主导卡片。 */
.workspace-overview-card strong,
.overview-metric strong,
.owner-metric-summary strong,
.operations-summary-grid strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.workspace-visits { font-family: var(--font-data); letter-spacing: -0.02em; }
/* 趋势指示徽章用渐变——设计系统列出的渐变出现位置之一。
   徽章内是白色数字，故走 AA 安全档。 */
.trend-change:not(.down) {
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
  background: var(--gradient-accent-surface);
  color: var(--accent-foreground);
  font-family: var(--font-mono);
}

/* —— K. 主色收口 ——
   把此前指向品牌绿的「主行动」语义交还给电光蓝强调色。
   绿色退回到只表达「已完成 / 一切正常」的状态语义。 */
.capability-card a,
.catalog-card-link,
.workspace-todo-item > span:last-child,
.notification-center-link,
.text-link,
.text-button,
.workspace-module-head > a,
.organization-link,
.public-file-actions a { color: var(--accent); font-weight: 600; }
.capability-card:has(> div[data-capability-action]:not(:empty)):hover {
  border-color: var(--primary-line-faint);
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}
.catalog-active-filters button:hover,
.workspace-quick-link:hover,
.workspace-role-summary:hover,
.choice-card:has(input:checked) {
  border-color: var(--primary-line);
  background: var(--primary-soft);
}
.asset-workspace-tabs button.active { color: var(--accent); }
/* Tab 下划线改用渐变，与整套强调色语言一致。 */
.asset-workspace-tabs button.active::after { background: var(--gradient-accent); }
.settings-nav a.active, .settings-nav a:hover { background: var(--primary-soft); color: var(--accent); box-shadow: inset 2px 0 var(--accent); }
.segmented button.active { background: var(--primary-soft); color: var(--accent); }
.catalog-control-region { border-radius: var(--radius-lg); background: var(--surface); }
.review-action-bar .button.primary {
  border-color: transparent;
  background: var(--gradient-accent-surface);
  color: var(--accent-foreground);
}
/* 深色区块的「实时」圆点也脉动。 */
.status-dot,
.live-label span {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 82, 255, .14);
  animation: accent-pulse 2s ease-in-out infinite;
}
.sidebar .status-dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .16); }

/* 精选卡片的渐变描边：用于门户精选位与高亮方案。 */
.portal-proof {
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--gradient-accent-diagonal) border-box;
  box-shadow: var(--shadow-lg);
}
.portal-proof span { color: var(--accent); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.12em; text-transform: uppercase; }
.portal-proof strong { font-size: 1.75rem; line-height: 1.3; }

/* —— L. 反转区块内的表面重置 ——
   深色区块里的卡片不能继续用白底，否则会打断反转的戏剧性。 */
.portal-process .surface,
.portal-process .capability-card { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); box-shadow: none; }

/* —— M. 入场动画 ——
   内容随滚动淡入并上移 28px，错开 0.1s。由 app.js 的
   IntersectionObserver 添加 .is-visible（视口阈值 0.15、-60px 边距）。
   无 JS 时 .reveal 不会被添加，内容保持可见——渐进增强。 */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.6s; }

/* —— N1. 旋转装饰圆环 ——
   虚线圆以极慢速度持续旋转（60 秒一圈）。这是「动态首屏图形」里
   最容易在无新增 DOM 的前提下实现的一件：挂在 Hero 的证明卡后面，
   用 conic-gradient 遮罩画出虚线环。
   60 秒一圈意味着用户几乎察觉不到它在转，只觉得画面是活的。 */
.portal-proof { position: relative; }
.portal-proof::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 128%;
  aspect-ratio: 1;
  border: 1px dashed var(--primary-line-soft);
  border-radius: 50%;
  translate: -50% -50%;
  animation: slow-spin 60s linear infinite;
  pointer-events: none;
  content: "";
}
@keyframes slow-spin {
  to { rotate: 360deg; }
}
/* 圆环在窄屏会溢出容器，直接隐藏（装饰元素，不承载信息）。 */
@media (max-width: 760px) {
  .portal-proof::before { display: none; }
}

/* —— N2. 箭头连接器 ——
   设计系统要求「时间线步骤之间通过带箭头的强调色小圆形徽章连接」。
   站点里真正的步骤序列是接入指南的 7 个 .guide-section（1→7 顺序流程），
   在相邻小节之间插入一枚箭头徽章，把它们读成一条链而不是七个孤立块。
   （门户能力卡是并列的六项能力、不是先后步骤，故不加连接符。） */
.intake-guide-content { position: relative; }
.guide-section { position: relative; }
/* 定位对齐序号圆心：小节内边距 space-6(24px) + 圆半径 21px = 45px，
   纵向落在 space-5(20px) 的小节间距正中。 */
.guide-section + .guide-section::before {
  position: absolute;
  top: calc(var(--space-5) / -2);
  left: calc(var(--space-6) + 21px);
  display: grid;
  width: var(--space-6);
  height: var(--space-6);
  place-items: center;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-accent);
  color: var(--accent-foreground);
  font-size: var(--text-micro);
  line-height: 1;
  content: "↓";
}

/* —— N. 漂浮元素 ——
   首屏卡片按缓慢正弦波上下浮动（振幅 10px、5 秒一轮）。
   慢到用户不会想到「这里有动画」，只觉得界面在呼吸。 */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.portal-proof { animation: gentle-float 5s ease-in-out infinite; }
/* 悬停时停下浮动：正在读的东西不应该动。 */
.portal-proof:hover { animation-play-state: paused; }

/* —— O. 无障碍：尊重 prefers-reduced-motion ——
   持续动画全部停止，入场动画立即落位（而不是永远隐藏）。 */
@media (prefers-reduced-motion: reduce) {
  .portal-hero .eyebrow::before,
  .portal-section-head .eyebrow::before,
  .catalog-heading .eyebrow::before,
  .public-organization-hero .eyebrow::before,
  .intake-guide-hero .eyebrow::before,
  .public-asset-header .eyebrow::before,
  .auth-card .eyebrow::before,
  .status-dot,
  .live-label span,
  .portal-proof,
  .portal-proof::before { animation: none; }
  .reveal,
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .button:hover, .icon-button:hover,
  .catalog-card:hover, .showcase-card:hover, .feed-card:hover, .trust-card:hover,
  .capability-card:has(> div[data-capability-action]:not(:empty)):hover,
  .portal-process li:hover { transform: none; }
}

/* —— P. 响应式：移动端简化结构，但保留大胆的视觉风格 ——
   渐变强调与颜色反转定义了这套风格，不能在窄屏被削掉；
   被削掉的应该是装饰性的光晕和非对称。 */
@media (max-width: 1100px) {
  .portal-hero { grid-template-columns: 1fr; }
  .public-asset-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .portal-hero h1 { font-size: clamp(2.25rem, 9vw, 2.75rem); }
  /* 移动端隐藏装饰性光晕：它们在窄屏只会挤占渲染成本。 */
  .portal-hero::before,
  .portal-hero::after,
  .public-organization-hero::before,
  .auth-shell::before { display: none; }
  /* 浮动在窄屏取消：小屏上的位移更容易被察觉为抖动。 */
  .portal-proof { animation: none; }
  /* CTA 垂直堆叠并占满宽度，保证 44px 触控目标。 */
  .portal-hero-actions .button { width: 100%; }
  .portal-search .button { width: 100%; }
  /* 区块内边距略微减小，而不是大幅压缩——留白是主要设计工具。 */
  .portal-section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  /* 窄屏小节内边距收到 space-4(16px)，连接徽章跟着左移对齐序号圆心。 */
  .guide-section + .guide-section::before { left: calc(var(--space-4) + 21px); }
}