/* ============================================================
   极客跳动 · AI for Science 智能体研发平台
   医学/生物科技 UI —— 深色科技风
   设计依据：med-biotech-ui-design 设计系统
   ============================================================ */

/* ---------- 设计 Token ---------- */
:root {
  /* 底色与层级 */
  --bg: #0b1220;                        /* 深空蓝黑 */
  --bg-2: #0e1628;                      /* 次级背景 */
  --panel: rgba(255, 255, 255, 0.04);   /* 玻璃面板 */
  --panel-2: rgba(255, 255, 255, 0.06); /* hover 面板 */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* 文字 */
  --text: #e8edf5;
  --text-2: #94a3b8;
  --text-3: #64748b;

  /* 主色与强调 */
  --blue: #3b82f6;      /* 电光蓝 */
  --cyan: #22d3ee;      /* 霓虹青 */
  --purple: #8b5cf6;    /* 紫（AI 点缀） */
  --green: #10b981;     /* 成功/正向 */
  --green-bright: #34d399;
  --amber: #f59e0b;     /* 警告 */
  --red: #f87171;       /* 警示 */
  --pink: #f472b6;      /* 通知/亮点 */

  /* AI 渐变（仅用于智能元素） */
  --grad: linear-gradient(135deg, #6366f1 0%, #3b82f6 45%, #22d3ee 100%);
  --grad-warm: linear-gradient(135deg, #8b5cf6, #f472b6);

  /* 字体 */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Segoe UI', sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* 圆角 / 间距 */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
}

/* ---------- 全局 ---------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(760px 520px at 12% -8%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(620px 460px at 96% 4%, rgba(34, 211, 238, 0.14), transparent 55%),
    radial-gradient(720px 560px at 50% 112%, rgba(139, 92, 246, 0.14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* 布局骨架 */
.app-shell { display: flex; min-height: 100vh; }

/* ---------- 侧边栏 ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 244px;
  background: rgba(11, 15, 26, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border);
  color: var(--text);
  padding: 25px 14px 14px;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.brand {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 10px 24px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.7px;
}
.brand small, .workspace small, .user small {
  display: block;
  font-size: 9px;
  color: #7d8ba3;
  letter-spacing: 1.35px;
  margin-top: 2px;
  font-weight: 500;
}
/* 品牌标记：三条渐变柱（频谱/波形） */
.brand-mark { width: 26px; height: 24px; display: flex; gap: 3px; align-items: end; }
.brand-mark i { width: 6px; background: var(--grad); display: block; border-radius: 3px 3px 1px 1px; box-shadow: 0 0 12px rgba(59, 130, 246, 0.5); }
.brand-mark i:nth-child(1) { height: 13px; background: linear-gradient(180deg, #22d3ee, #3b82f6); }
.brand-mark i:nth-child(2) { height: 23px; }
.brand-mark i:nth-child(3) { height: 17px; background: linear-gradient(180deg, #8b5cf6, #6366f1); }

.workspace {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 2px 21px;
}
.workspace .avatar {
  width: 27px; height: 27px;
  display: grid; place-items: center;
  background: var(--grad);
  border-radius: 7px;
  font-size: 10px; font-weight: 700;
  color: #fff;
}
.workspace b { font-size: 11px; line-height: 1.2; display: block; font-weight: 600; color: var(--text); }
.workspace button, .user button { margin-left: auto; border: 0; background: none; color: #6d7a90; cursor: pointer; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav p { color: #4a5568; font-size: 10px; letter-spacing: 1.1px; margin: 14px 10px 7px; text-transform: uppercase; }
.nav-item {
  border: 0; background: transparent;
  color: #a9b4c6;
  font: inherit;
  width: 100%;
  padding: 10px;
  border-radius: var(--r-sm);
  text-align: left;
  display: flex; align-items: center; gap: 11px;
  cursor: pointer;
  transition: 0.18s;
  position: relative;
}
.nav-item > span { font-size: 16px; width: 15px; color: #7d8ba3; line-height: 1; }
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.22), rgba(34, 211, 238, 0.08));
  color: #fff; font-weight: 600;
}
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 3px;
  background: var(--grad);
}
.nav-item.active span { color: var(--cyan); }
.nav-item em {
  font-style: normal;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  padding: 1px 6px; border-radius: 9px;
  margin-left: auto; font-size: 10px;
}
.nav-item.active em { background: rgba(59, 130, 246, 0.35); color: #dbeafe; }
.nav-item em.alert-badge { background: rgba(244, 114, 182, 0.2); color: #fbcfe8; }

.sidebar-bottom { margin-top: auto; }
.user { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); margin: 14px 4px 0; padding: 16px 5px 4px; }
.user-avatar {
  background: var(--grad-warm);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.user b { font-size: 11px; display: block; color: var(--text); }

/* ---------- 主区 ---------- */
.main { margin-left: 244px; min-width: 0; flex: 1; }

.topbar {
  height: 68px;
  padding: 0 44px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(11, 18, 32, 0.6);
  position: sticky; top: 0; z-index: 4;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.crumb { display: flex; gap: 9px; align-items: center; }
.crumb b { font-size: 13px; color: var(--text); }
.crumb span { color: var(--text-3); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-sm);
  font-size: 19px; cursor: pointer;
  color: var(--text-2); position: relative;
  transition: 0.18s;
}
.icon-button:hover { background: var(--panel-2); color: #fff; border-color: var(--border-strong); }
.notification i {
  width: 6px; height: 6px;
  background: var(--pink); border-radius: 50%;
  display: block; position: absolute; top: 8px; right: 8px;
  box-shadow: 0 0 8px rgba(244, 114, 182, 0.8);
}

/* ---------- 按钮 ---------- */
.primary-button, .outline-button {
  border: 0;
  border-radius: var(--r-sm);
  padding: 10px 15px;
  font: 600 12px var(--font);
  cursor: pointer;
  transition: 0.18s;
}
.primary-button {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
}
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(59, 130, 246, 0.45); }
.outline-button {
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border-strong);
}
.outline-button:hover { color: #fff; border-color: var(--cyan); }

/* ---------- 页面容器 ---------- */
.page { display: none; padding: 43px 44px 56px; max-width: 1600px; margin: auto; }
.page.active { display: block; }

.hero-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 31px; }
.eyebrow {
  font-size: 10px; letter-spacing: 1.3px; font-weight: 700;
  color: var(--cyan); margin: 0 0 11px; text-transform: uppercase;
}
.hero-row h1, .title-row h1 {
  font-size: 36px; line-height: 1.18; letter-spacing: -1.8px;
  margin: 0 0 13px; color: #fff; font-weight: 700;
}
.lead { margin: 0; color: var(--text-2); line-height: 1.7; font-size: 13px; }

.hero-status {
  width: 230px;
  border-left: 1px solid var(--border-strong);
  padding-left: 24px;
  margin: 0 8px 5px;
}
.pulse { font-size: 11px; color: var(--green-bright); font-weight: 600; margin-bottom: 9px; }
.pulse i {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--green-bright);
  margin-right: 6px; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}
.hero-status > b {
  font-size: 34px; letter-spacing: -2px; line-height: 1;
  font-family: var(--mono); font-weight: 600; color: #fff;
}
.hero-status > b span { font-size: 17px; }
.hero-status small { color: var(--text-3); font-size: 11px; }

/* ---------- KPI 指标卡片 ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; }

.metric-card, .panel, .agent-card, .result-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.metric-card {
  padding: 18px 19px 14px;
  min-height: 166px;
  overflow: hidden;
  position: relative;
  --accent: var(--blue);
}
/* 顶部渐变描边 */
.metric-card::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.metric-card:nth-child(1) { --accent: #3b82f6; }
.metric-card:nth-child(2) { --accent: #22d3ee; }
.metric-card:nth-child(3) { --accent: #8b5cf6; }
.metric-card:nth-child(4) { --accent: #f472b6; }
.metric-card:hover { background: var(--panel-2); border-color: var(--border-strong); }

.metric-card > div:first-child { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 12px; }
.more { border: 0; background: transparent; color: var(--text-3); cursor: pointer; letter-spacing: 1px; }
.metric-card strong {
  font-size: 30px; letter-spacing: -1.7px; display: block; margin: 13px 0 4px;
  font-family: var(--mono); font-weight: 600; color: #fff;
}
.metric-card strong small, .metric-card strong span { font-size: 15px; letter-spacing: 0; }
.metric-card p { font-size: 10px; color: var(--text-3); margin: 0; }
.up { color: var(--green-bright); font-weight: 600; }

.mini-bars { height: 34px; margin-top: 12px; display: flex; gap: 5px; align-items: end; }
.mini-bars i { width: 10px; background: rgba(255, 255, 255, 0.14); border-radius: 2px 2px 0 0; }
.mini-bars i.red { background: linear-gradient(180deg, var(--cyan), var(--blue)); }

.task-dots { display: flex; align-items: center; gap: 5px; margin-top: 18px; }
.task-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px rgba(34, 211, 238, 0.6); }
.task-dots i:nth-child(n+5) { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
.task-dots span { font-size: 10px; color: var(--text-2); margin-left: 4px; font-family: var(--mono); }

.metric-card svg { width: 100%; height: 42px; margin-top: 11px; }

/* 强调卡（第 4 张，深色渐变 + 光晕） */
.metric-card.emphasis {
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.24), rgba(59, 130, 246, 0.08));
  border-color: rgba(139, 92, 246, 0.4);
  position: relative;
}
.metric-card.emphasis::after {
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.28), transparent 65%);
  pointer-events: none;
}
.metric-card.emphasis > div:first-child { color: #c4b5fd; }
.metric-card.emphasis p { color: #a5b4fc; }
.metric-card.emphasis p b { color: #fff; }
.save-mark {
  position: absolute; right: -12px; bottom: -22px;
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--grad-warm);
  font-size: 43px !important; font-weight: 300;
  transform: rotate(-13deg);
  display: grid !important; place-items: center;
  color: white;
  box-shadow: 0 8px 26px rgba(139, 92, 246, 0.45);
}
.save-mark span { position: absolute; font-size: 8px; letter-spacing: 1px; bottom: 17px; transform: rotate(13deg); }

/* ---------- 双栏内容 ---------- */
.content-grid { display: grid; grid-template-columns: 1.58fr 1fr; gap: 15px; margin-bottom: 15px; }
.panel { padding: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; }
.panel h2 { font-size: 16px; letter-spacing: -0.4px; margin: 0 0 5px; color: #fff; }
.panel-head p { font-size: 11px; color: var(--text-3); margin: 0; }

.segment { border: 1px solid var(--border); padding: 2px; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.2); }
.segment button { background: transparent; border: 0; padding: 5px 8px; color: var(--text-3); font-size: 10px; cursor: pointer; }
.segment .selected { background: rgba(255, 255, 255, 0.12); color: #fff; border-radius: 7px; }

.legend { display: flex; gap: 17px; font-size: 10px; color: var(--text-2); margin: 21px 0 4px; }
.legend i, .load-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.red-dot { background: var(--cyan); }
.gray-dot { background: #8b5cf6; }
.orange-dot { background: var(--amber); }

.chart-wrap { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 210px 18px; }
.y-labels { grid-row: 1; display: flex; justify-content: space-between; flex-direction: column; font-size: 9px; color: var(--text-3); text-align: left; font-family: var(--mono); }
.line-chart { grid-column: 2; width: 100%; height: 210px; }
.gridlines line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.x-labels { grid-column: 2; display: flex; justify-content: space-between; font-size: 9px; color: var(--text-3); padding-top: 7px; font-family: var(--mono); }

.ai-label { color: var(--cyan) !important; font-size: 9px !important; letter-spacing: 1px; font-weight: 700; margin-bottom: 7px !important; }

/* AI 洞察面板 */
.ai-panel {
  background: linear-gradient(160deg, rgba(99, 102, 241, 0.14), rgba(34, 211, 238, 0.05));
  border-color: rgba(99, 102, 241, 0.32);
}
.text-button, .inline-action, .card-link {
  border: 0; background: transparent;
  color: var(--cyan); font: 600 11px var(--font);
  cursor: pointer; padding: 0;
  transition: 0.15s;
}
.text-button:hover, .inline-action:hover, .card-link:hover { color: #fff; }

.insight { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.insight:last-child { border: 0; }
.insight-icon {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); color: var(--text-2);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.insight.critical .insight-icon { background: rgba(244, 114, 182, 0.18); color: var(--pink); }
.insight b { font-size: 11px; color: var(--text); }
.insight p { font-size: 10px; color: var(--text-3); line-height: 1.5; margin: 4px 0 5px; }
.inline-action { font-size: 10px; }

/* ---------- 表格 ---------- */
.task-panel { padding-bottom: 8px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { text-align: left; font-size: 10px; color: var(--text-3); font-weight: 500; padding: 15px 11px; border-bottom: 1px solid var(--border-strong); }
td { padding: 14px 11px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-2); }
tbody tr { transition: 0.15s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
tbody tr:last-child td { border-bottom: 0; }
td b { display: block; font-size: 11px; color: var(--text); font-weight: 600; }
td small { font-size: 9px; color: var(--text-3); display: block; margin-top: 4px; font-family: var(--mono); }
.agent-chip {
  font-size: 10px;
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
  padding: 5px 8px; border-radius: 5px;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.progress { width: 61px; height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 4px; display: inline-block; vertical-align: middle; margin-right: 5px; }
.progress i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.status { font-size: 10px; font-weight: 600; }
.status.running { color: var(--green-bright); }
.status.queued { color: var(--amber); }
.status.risk { color: var(--red); }
.row-action {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px; color: var(--text-2);
  font: 500 10px var(--font);
  padding: 6px 9px; cursor: pointer;
  transition: 0.15s;
}
.row-action:hover { border-color: var(--border-strong); color: #fff; background: var(--panel-2); }

/* ---------- 标题行 + 筛选 ---------- */
.title-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 31px; }
.title-row h1 { font-size: 34px; }
.filters { display: flex; gap: 9px; margin-bottom: 17px; }
.search {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 11px; color: var(--text-3);
  width: 280px;
}
.search input { border: 0; outline: 0; font: inherit; width: 230px; margin-left: 4px; font-size: 11px; background: transparent; color: var(--text); }
.search input::placeholder { color: var(--text-3); }
.filter-button {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-sm);
  padding: 8px 11px; font: 500 11px var(--font);
  color: var(--text-2); cursor: pointer;
  transition: 0.15s;
}
.filter-button b { font-size: 10px; background: rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 2px 5px; margin-left: 3px; }
.filter-button.active-filter { border-color: rgba(59, 130, 246, 0.5); color: #fff; background: rgba(59, 130, 246, 0.14); }
.full-table { padding: 4px 20px; }

/* ---------- 智能体中心 ---------- */
.agent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.agent-card { padding: 20px; min-height: 234px; display: flex; flex-direction: column; }
.agent-card.featured { border-top: 3px solid transparent; border-image: var(--grad) 1; background: linear-gradient(160deg, rgba(59, 130, 246, 0.1), var(--panel)); }
.agent-top { display: flex; justify-content: space-between; align-items: center; }
.agent-symbol { font-size: 25px; color: var(--cyan); }
.agent-card h2 { font-size: 16px; letter-spacing: -0.5px; margin: 24px 0 8px; color: #fff; }
.agent-card p { font-size: 11px; color: var(--text-2); line-height: 1.7; margin: 0; }
.agent-stats { border-top: 1px solid var(--border); margin-top: auto; padding-top: 13px; display: flex; gap: 20px; font-size: 9px; color: var(--text-3); }
.agent-stats b { font-size: 14px; color: #fff; display: block; margin-bottom: 3px; font-family: var(--mono); font-weight: 600; }
.card-link { margin-top: 15px; text-align: left; }
.add-agent { background: transparent; border-style: dashed; border-color: var(--border-strong); align-items: flex-start; justify-content: center; }
.add-agent > span { font-size: 28px; color: var(--text-3); }
.add-agent h2 { margin-top: 18px; }

/* ---------- 算力调度 ---------- */
.compute-layout, .ops-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 15px; }
.compute-map { min-height: 330px; }
.live-status { font-size: 10px; color: var(--green-bright); font-family: var(--mono); }
.network { height: 220px; display: flex; align-items: center; justify-content: center; gap: 13px; position: relative; }
.cluster {
  width: 153px; min-height: 125px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 14px; position: relative; z-index: 1;
}
.cluster small { font-size: 9px; color: var(--text-3); display: block; }
.cluster b { font-size: 11px; display: block; margin: 8px 0; color: var(--text); }
.cluster strong { font-size: 25px; letter-spacing: -1px; display: block; font-family: var(--mono); font-weight: 600; color: #fff; }
.cluster span { color: var(--text-2); font-size: 9px; }
.cluster.own { border-top: 3px solid var(--cyan); box-shadow: 0 0 24px rgba(34, 211, 238, 0.12); }
.cluster.external { border-top: 3px solid var(--purple); box-shadow: 0 0 24px rgba(139, 92, 246, 0.12); }
.router {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: 23px;
  position: relative; z-index: 1;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.45);
}
.router small { position: absolute; top: 83px; color: var(--text-3); font-size: 9px; width: 100px; text-align: center; }
.network-line { height: 1px; background: var(--border-strong); width: 45px; }

.allocation { padding: 23px; }
.allocation h2 { margin-bottom: 20px; }
.load-row { margin: 16px 0; }
.load-row span { font-size: 11px; color: var(--text-2); }
.load-row > b { float: right; font-size: 11px; color: var(--text); font-family: var(--mono); }
.load-row > div { height: 5px; background: rgba(255, 255, 255, 0.1); margin-top: 8px; border-radius: 5px; }
.load-row > div i { height: 100%; display: block; background: var(--grad); border-radius: 5px; }
.load-row:first-of-type > div i { background: var(--grad); }

.ai-recommend {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  margin: 24px -2px 0; padding: 12px;
  border-radius: var(--r-sm);
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
}
.ai-recommend span { color: var(--cyan); }
.ai-recommend p { font-size: 10px; line-height: 1.5; margin: 0; color: #b7c3d9; }
.ai-recommend p b { display: block; color: #fff; }
.ai-recommend button { grid-column: 2; justify-self: start; border: 0; background: transparent; color: var(--cyan); font: 600 10px var(--font); padding: 0; cursor: pointer; }

/* ---------- 数据资产 ---------- */
.data-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }
.data-summary article {
  background: linear-gradient(150deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.08));
  border: 1px solid var(--border-strong);
  padding: 21px; border-radius: var(--r-md);
}
.data-summary article span, .data-summary article small { font-size: 10px; color: var(--text-2); display: block; }
.data-summary article b { font-size: 28px; letter-spacing: -1px; display: block; margin: 10px 0 3px; font-family: var(--mono); font-weight: 600; color: #fff; }
.data-summary article b small { display: inline; font-size: 14px; }
.dataset-list > div { display: grid; grid-template-columns: 34px 1fr 70px 85px; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.dataset-list > div:last-child { border: 0; }
.file-type { width: 27px; height: 27px; background: rgba(59, 130, 246, 0.16); color: #7db4ff; border-radius: 6px; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.file-type.vector { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; }
.file-type.doc { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
.dataset-list b { font-size: 11px; color: var(--text); }
.dataset-list small { font-size: 9px; color: var(--text-3); display: block; margin-top: 4px; }
.dataset-list em { font-style: normal; color: var(--green-bright); font-size: 10px; }
.dataset-list strong { font-size: 10px; text-align: right; color: var(--text-2); font-family: var(--mono); }

/* ---------- 运维中心 ---------- */
.health { min-height: 290px; }
.health-score { text-align: center; margin: 21px 0; }
.health-score b { font-size: 54px; letter-spacing: -4px; font-family: var(--mono); font-weight: 600; color: #fff; }
.health-score span { font-size: 16px; color: var(--text-3); }
.health-score small { display: block; color: var(--green-bright); font-size: 11px; font-weight: 600; }
.health-bars p { display: grid; grid-template-columns: 95px 1fr 30px; gap: 8px; align-items: center; font-size: 10px; color: var(--text-2); }
.health-bars i { height: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.health-bars i b { display: block; height: 100%; background: var(--grad); border-radius: 5px; }
.health-bars em { font-style: normal; color: var(--green-bright); font-size: 9px; }
.health-bars em.warn { color: var(--amber); }
.events { padding-bottom: 7px; }
.event { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding: 14px 0; }
.severity { font-size: 9px; font-weight: 700; border-radius: 4px; padding: 4px 5px; }
.severity.high { background: rgba(248, 113, 113, 0.16); color: var(--red); }
.severity.mid { background: rgba(245, 158, 11, 0.16); color: var(--amber); }
.event div { flex: 1; }
.event b { font-size: 11px; color: var(--text); }
.event p { font-size: 10px; color: var(--text-3); margin: 4px 0 0; }

/* ---------- 弹窗 ---------- */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(4, 7, 14, 0.6);
  z-index: 20; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(6px);
}
.modal-backdrop.open { display: flex; }
.modal {
  position: relative; width: min(480px, 100%);
  background: #101a2e;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 29px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.close-modal { position: absolute; right: 17px; top: 13px; border: 0; background: transparent; font-size: 24px; color: var(--text-3); cursor: pointer; }
.modal h2 { font-size: 25px; letter-spacing: -1px; margin: 0 0 8px; color: #fff; }
.modal-lead { font-size: 12px; color: var(--text-2); line-height: 1.6; margin: 0 0 22px; }
.modal label { display: block; font-size: 11px; font-weight: 600; margin: 14px 0; color: var(--text-2); }
.modal input, .modal select {
  width: 100%; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 10px; margin-top: 6px;
  font: 12px var(--font); background: rgba(255, 255, 255, 0.05); color: var(--text);
}
.modal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 7px; }
.resource-option { border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.04); border-radius: var(--r-sm); padding: 10px; text-align: left; cursor: pointer; }
.resource-option.selected-resource { border-color: rgba(59, 130, 246, 0.6); background: rgba(59, 130, 246, 0.14); }
.resource-option b, .resource-option span { display: block; font-size: 10px; }
.resource-option b { color: var(--text); }
.resource-option span { font-size: 9px; color: var(--text-3); line-height: 1.4; margin-top: 4px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; right: 25px; bottom: 25px;
  background: rgba(16, 26, 46, 0.95);
  border: 1px solid var(--border-strong);
  color: #fff; border-radius: var(--r-md);
  padding: 13px 17px; display: flex; gap: 10px; align-items: center;
  transform: translateY(100px); opacity: 0; transition: 0.3s;
  z-index: 30; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast > span { width: 21px; height: 21px; background: var(--grad); border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.toast p { margin: 0; }
.toast b, .toast small { display: block; font-size: 11px; }
.toast small { color: var(--text-2); margin-top: 2px; font-size: 10px; }

/* ============================================================
   智能体工作台（lab）
   ============================================================ */
.studio-shell { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 15px; margin-bottom: 15px; }
.studio-main {
  background: linear-gradient(160deg, rgba(99, 102, 241, 0.1), rgba(11, 18, 32, 0.6));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(14px);
}
.studio-title { display: flex; align-items: center; gap: 13px; }
.studio-icon {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4);
}
.studio-title h2 { font-size: 19px; margin: 0 0 3px; letter-spacing: -0.5px; color: #fff; }
.studio-title p { margin: 0; color: var(--text-2); font-size: 11px; }
.prompt-box {
  margin-top: 23px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(11, 18, 32, 0.6);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}
.prompt-box textarea {
  width: 100%; height: 112px; border: 0; resize: none; outline: 0; padding: 16px;
  font: 12px/1.7 var(--font); color: var(--text); background: transparent;
}
.prompt-box textarea::placeholder { color: var(--text-3); }
.prompt-footer { padding: 10px 11px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.prompt-footer > span { font-size: 9px; color: var(--text-3); margin-left: auto; }
.skill-picker { border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.05); border-radius: 15px; padding: 7px 11px; color: var(--text-2); font: 500 10px var(--font); cursor: pointer; }
.skill-picker:hover { color: #fff; border-color: var(--cyan); }
.quick-start { display: flex; align-items: center; gap: 8px; margin-top: 17px; flex-wrap: wrap; }
.quick-start span { font-size: 10px; color: var(--text-3); margin-right: 2px; }
.quick-start button { border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 255, 255, 0.04); padding: 7px 11px; color: var(--text-2); font: 500 10px var(--font); cursor: pointer; transition: 0.15s; }
.quick-start button:hover { border-color: var(--cyan); color: #fff; }

.studio-side {
  background: linear-gradient(165deg, rgba(99, 102, 241, 0.2), rgba(11, 18, 32, 0.7));
  color: #fff; border-radius: var(--r-lg);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 0 22px 22px; overflow: hidden;
}
.protein-visual {
  height: 168px; margin: 0 -22px 18px;
  background:
    radial-gradient(420px 240px at 30% 20%, rgba(99, 102, 241, 0.35), transparent 65%),
    linear-gradient(160deg, rgba(8, 14, 28, 0.92), rgba(16, 26, 46, 0.6));
  position: relative; padding: 18px;
  overflow: hidden;
}
.protein-visual svg { position: absolute; right: -8px; bottom: -4px; opacity: 0.9; }
.protein-visual span { display: block; font-size: 8px; letter-spacing: 1.3px; color: var(--cyan); margin-bottom: 8px; position: relative; z-index: 1; }
.protein-visual b { font-size: 15px; line-height: 1.4; color: #fff; position: relative; z-index: 1; }
.studio-side .eyebrow { color: #c4b5fd; margin-bottom: 8px; }
.studio-side h2 { font-size: 16px; margin: 0 0 18px; }
.capability { padding: 11px 0; border-top: 1px solid var(--border); }
.capability b { display: block; font-size: 11px; }
.capability span { color: var(--text-2); font-size: 9px; display: block; margin-top: 5px; }
.side-note { color: var(--text-2); font-size: 9px; line-height: 1.65; border-top: 1px solid var(--border); margin: 15px 0 0; padding-top: 14px; }

.flow-panel { padding-bottom: 23px; }
.flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 21px; }
.flow-steps > div { padding: 0 17px; border-left: 1px solid var(--border); min-height: 93px; }
.flow-steps > div:first-child { border-left: 0; padding-left: 0; }
.flow-steps i { font-style: normal; color: var(--cyan); font-size: 10px; font-weight: 700; display: block; margin-bottom: 9px; font-family: var(--mono); }
.flow-steps b { font-size: 11px; display: block; margin-bottom: 6px; color: var(--text); }
.flow-steps span { display: block; color: var(--text-3); font-size: 9px; line-height: 1.5; }

/* ============================================================
   结果中心（results）
   ============================================================ */
.result-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 15px; }
.result-card { padding: 20px; min-height: 238px; display: flex; flex-direction: column; }
.featured-result { border-top: 3px solid transparent; border-image: var(--grad) 1; background: linear-gradient(160deg, rgba(59, 130, 246, 0.1), var(--panel)); }
.result-card h2 { font-size: 16px; letter-spacing: -0.4px; margin: 19px 0 7px; color: #fff; }
.result-card > p { font-size: 10px; color: var(--text-3); line-height: 1.5; margin: 0; }
.result-metrics { display: flex; gap: 22px; border-top: 1px solid var(--border); margin-top: auto; padding-top: 14px; }
.result-metrics span { font-size: 9px; color: var(--text-3); }
.result-metrics b { font-size: 19px; color: #fff; display: block; margin-bottom: 3px; font-family: var(--mono); font-weight: 600; }
.result-actions { display: flex; align-items: center; gap: 15px; margin-top: 17px; }
.result-card ul { padding-left: 16px; margin: 18px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.8; }
.result-card .card-link { margin-top: auto; }
.result-progress { height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; margin-top: auto; }
.result-progress i { height: 100%; display: block; background: var(--grad); border-radius: 5px; }
.result-card > small { font-size: 9px; color: var(--text-3); margin-top: 7px; }
.result-card .status { align-self: flex-start; }

/* ============================================================
   GPU 管理与模型部署中心
   ============================================================ */
.gpu-tabs { display: flex; gap: 7px; border-bottom: 1px solid var(--border); margin: -8px 0 19px; }
.gpu-tab { border: 0; background: transparent; padding: 10px 13px; color: var(--text-3); font: 600 11px var(--font); cursor: pointer; position: relative; }
.gpu-tab.active { color: var(--cyan); }
.gpu-tab.active:after { content: ""; height: 2px; background: var(--grad); position: absolute; bottom: -1px; left: 10px; right: 10px; border-radius: 2px; }
.gpu-pane { display: none; }
.gpu-pane.active { display: block; }
.gpu-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.gpu-kpis article {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-md);
  padding: 15px 17px;
}
.gpu-kpis span, .gpu-kpis small { display: block; font-size: 10px; color: var(--text-3); }
.gpu-kpis b { display: block; font-size: 25px; letter-spacing: -1px; margin: 7px 0 3px; font-family: var(--mono); font-weight: 600; color: #fff; }
.gpu-kpis .gpu-ok { color: var(--green-bright); }
.gpu-kpis article > i { display: block; height: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; margin-top: 10px; }
.gpu-kpis article > i em { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.gpu-kpis.compact article { min-height: 88px; }
.gpu-center-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; margin-bottom: 14px; }
.gpu-cluster-list { margin-top: 15px; }
.merged-cluster { display: grid; grid-template-columns: 9px 1fr 132px; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.merged-cluster:first-child { border: 0; }
.merged-cluster > i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 6px rgba(52, 211, 153, 0.6); }
.merged-cluster > i.warn { background: var(--amber); box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.merged-cluster > i.offline { background: var(--text-3); box-shadow: none; }
.merged-cluster b, .merged-cluster small { display: block; }
.merged-cluster b { font-size: 11px; color: var(--text); }
.merged-cluster small { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.merged-cluster span { font-size: 10px; display: flex; gap: 6px; align-items: center; color: var(--text-2); }
.merged-cluster em { display: block; height: 5px; flex: 1; background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.merged-cluster em i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }

.gpu-recommend {
  display: flex; gap: 10px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: var(--r-sm); padding: 13px; margin-top: 15px;
}
.gpu-recommend > span { font-size: 17px; color: var(--cyan); }
.gpu-recommend b { font-size: 11px; color: var(--text); }
.gpu-recommend p { font-size: 10px; color: var(--text-2); line-height: 1.5; margin: 5px 0; }
.gpu-event { display: flex; gap: 10px; align-items: center; padding: 13px 0 0; margin-top: 13px; border-top: 1px solid var(--border); }
.gpu-event > i { font-style: normal; background: rgba(245, 158, 11, 0.16); color: var(--amber); width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; }
.gpu-event > div { flex: 1; }
.gpu-event b, .gpu-event small { display: block; }
.gpu-event b { font-size: 11px; color: var(--text); }
.gpu-event small { font-size: 10px; color: var(--text-3); margin-top: 4px; }
.gpu-resource-table { padding-bottom: 5px; }

.merged-status { font-size: 10px; font-weight: 600; }
.merged-status.available { color: var(--green-bright); }
.merged-status.busy { color: #7db4ff; }
.merged-status.alert { color: var(--red); }
.merged-status.offline { color: var(--text-3); }

.merged-model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.merged-model-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 17px; min-height: 245px;
  display: flex; flex-direction: column;
  transition: 0.18s;
}
.merged-model-card:hover { border-color: var(--border-strong); background: var(--panel-2); }
.merged-model-card > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.model-source { font-size: 9px; background: rgba(59, 130, 246, 0.16); color: #7db4ff; padding: 4px 7px; border-radius: 4px; }
.merged-model-card h2 { font-size: 15px; margin: 18px 0 6px; letter-spacing: -0.4px; color: #fff; }
.merged-model-card > p { font-size: 10px; color: var(--text-3); line-height: 1.55; margin: 0; }
.model-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border); }
.model-detail-grid span { font-size: 9px; color: var(--text-3); }
.model-detail-grid b { font-size: 10px; color: var(--text); display: block; margin-top: 3px; font-family: var(--mono); font-weight: 500; }
.model-card-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }

.legend-text { font-size: 10px; color: var(--text-2); }
.merged-chart { width: 100%; height: 205px; margin-top: 15px; }
.merged-chart line { stroke: rgba(255, 255, 255, 0.07); }
.merged-chart path { fill: none; stroke: var(--blue); stroke-width: 3; }
.merged-chart .muted-line { stroke: var(--purple); stroke-dasharray: 5 5; }
.gpu-retry { margin-top: 15px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; }
.gpu-retry > b { font-size: 11px; color: var(--text); }
.gpu-retry p { font-size: 10px; line-height: 1.55; color: var(--text-3); }
.gpu-retry span { font-size: 10px; color: var(--text-2); margin-right: 16px; font-family: var(--mono); }
.gpu-retry span b { color: #fff; margin-left: 3px; }

/* ============================================================
   协作与治理：账号、角色权限与个人资料
   ============================================================ */
.govern-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 15px; }
.govern-kpis article { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 17px; }
.govern-kpis b { font-size: 26px; display: block; letter-spacing: -1px; color: #fff; font-family: var(--mono); font-weight: 600; }
.govern-kpis span { font-size: 10px; color: var(--text-2); display: block; margin-top: 5px; }

.settings-layout { display: grid; grid-template-columns: 255px 1fr; gap: 14px; margin-bottom: 14px; }
.role-list { padding: 12px; }
.role-list h2 { padding: 7px 8px 12px; }
.role-choice {
  border: 0; background: transparent; border-radius: 7px;
  padding: 10px; width: 100%;
  display: flex; justify-content: space-between;
  color: var(--text-2); font: 500 11px var(--font);
  cursor: pointer; text-align: left;
  transition: 0.15s;
}
.role-choice:hover, .role-choice.selected { background: rgba(59, 130, 246, 0.14); color: #fff; }
.role-choice small { font-size: 9px; color: var(--text-3); }
.role-list .outline-button { margin: 13px 5px 3px; width: calc(100% - 10px); }

.permission-list { border-top: 1px solid var(--border); margin-top: 17px; }
.permission-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 3px; border-bottom: 1px solid var(--border); cursor: pointer; }
.permission-row b, .permission-row small { display: block; }
.permission-row b { font-size: 11px; color: var(--text); }
.permission-row small { font-size: 10px; color: var(--text-3); margin-top: 4px; }
.permission-row input, .toggle input { display: none; }
.permission-row i, .toggle i { display: block; width: 32px; height: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); position: relative; transition: 0.2s; }
.permission-row i:after, .toggle i:after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: 0.2s; }
.permission-row input:checked + i, .toggle input:checked + i { background: var(--grad); }
.permission-row input:checked + i:after, .toggle input:checked + i:after { transform: translateX(14px); }

.security-settings { padding-bottom: 4px; }
.security-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 3px; border-top: 1px solid var(--border); }
.security-row b { font-size: 11px; color: var(--text); }
.security-row p { font-size: 10px; color: var(--text-3); margin: 4px 0 0; }

.profile-layout { display: grid; grid-template-columns: 290px 1fr; gap: 14px; }
.profile-card { text-align: center; }
.profile-avatar {
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--grad);
  color: #fff; display: grid; place-items: center;
  font-size: 27px; font-weight: 700; margin: 4px auto 14px;
  position: relative;
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.4);
}
.profile-avatar span {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  padding: 3px 7px; background: #16233e;
  border: 1px solid var(--border-strong);
  border-radius: 9px; color: var(--cyan); font-size: 8px; white-space: nowrap;
}
.profile-card h2 { font-size: 18px; margin: 0 0 5px; color: #fff; }
.profile-card > p { font-size: 10px; color: var(--text-3); margin: 0 0 22px; }
.profile-card > div:not(.profile-avatar) { display: flex; justify-content: space-between; text-align: left; border-top: 1px solid var(--border); padding: 13px 0; }
.profile-card > div b, .profile-card > div span { font-size: 10px; }
.profile-card > div b { color: var(--text-2); }
.profile-card > div span { color: var(--text-3); }

.profile-form h2 { font-size: 14px; margin: 0 0 14px; color: #fff; }
.profile-form h2:nth-of-type(2) { border-top: 1px solid var(--border); padding-top: 21px; margin-top: 21px; }
.profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.profile-fields label { font-size: 10px; color: var(--text-2); }
.profile-fields input {
  display: block; width: 100%; margin-top: 6px; padding: 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05); color: var(--text); font: 11px var(--font);
}
.profile-security { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding: 14px 0; }
.profile-security b, .profile-security small { display: block; }
.profile-security b { font-size: 11px; color: var(--text); }
.profile-security small { font-size: 10px; color: var(--text-3); margin-top: 4px; }

/* ============================================================
   动效（尊重 reduced-motion）
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .pulse i { animation: pulse 2.5s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.35; } }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .agent-grid { grid-template-columns: repeat(2, 1fr); }
  .studio-shell { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .flow-steps > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .gpu-kpis { grid-template-columns: repeat(2, 1fr); }
  .gpu-center-grid { grid-template-columns: 1fr; }
  .merged-model-grid { grid-template-columns: repeat(2, 1fr); }
  .govern-kpis { grid-template-columns: repeat(2, 1fr); }
  .settings-layout, .profile-layout { grid-template-columns: 1fr; }
  .role-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .role-list h2, .role-list .outline-button { grid-column: 1 / -1; }
  .role-list .outline-button { width: 100%; margin: 6px 0 0; }
}

@media (max-width: 760px) {
  .sidebar { width: 58px; padding: 18px 8px; }
  .brand { padding: 0 8px 20px; }
  .brand > span:last-child, .workspace > span:not(.avatar), .workspace button, .nav p, .nav-item:not(.active) { display: none; }
  .workspace { padding: 7px; justify-content: center; margin: 0 0 12px; }
  .nav-item.active { justify-content: center; padding: 11px; }
  .nav-item.active > span { width: auto; }
  .user > span:not(.user-avatar), .user button { display: none; }
  .user { padding: 12px 0; }
  .main { margin-left: 58px; }
  .topbar { padding: 0 16px; }
  .crumb span, .icon-button { display: none; }
  .page { padding: 30px 16px; }
  .hero-row, .title-row { display: block; }
  .hero-status { margin: 23px 0 0; }
  .metric-grid, .content-grid, .compute-layout, .ops-grid, .data-summary { grid-template-columns: 1fr; }
  .agent-grid { grid-template-columns: 1fr; }
  .filters { overflow: auto; }
  .top-actions .primary-button { padding: 9px; font-size: 0; }
  .top-actions .primary-button:first-letter { font-size: 17px; }
  .dataset-list > div { grid-template-columns: 34px 1fr 52px; }
  .dataset-list strong { display: none; }
  .page h1, .hero-row h1 { font-size: 30px; }
  .panel { padding: 16px; }
  .full-table { padding: 3px 12px; }
  .flow-steps { grid-template-columns: 1fr; gap: 17px; }
  .flow-steps > div { border-left: 0; padding: 0; }
  .prompt-footer > span { display: none; }
  .prompt-footer { flex-wrap: wrap; }
  .prompt-footer .primary-button { margin-left: auto; }
  .gpu-kpis, .merged-model-grid { grid-template-columns: 1fr; }
  .gpu-tabs { overflow: auto; white-space: nowrap; }
  .merged-cluster { grid-template-columns: 9px 1fr; }
  .merged-cluster span { grid-column: 2; }
  .gpu-center-grid { grid-template-columns: 1fr; }
  .govern-kpis, .profile-fields { grid-template-columns: 1fr; }
  .role-list { grid-template-columns: 1fr; }
  .profile-security { gap: 12px; }
  .profile-security .outline-button { white-space: nowrap; }
}

/* ============================================================
   产品闭环新增页面：研究计划 / 任务详情 / 结果详情
   ============================================================ */

/* ---------- 通用：返回链接 / 详情页 ---------- */
.back-link {
  border: 0; background: transparent; color: var(--text-2);
  font: 500 12px var(--font); cursor: pointer; padding: 0 0 16px;
  display: inline-block; transition: 0.15s;
}
.back-link:hover { color: var(--cyan); }
.mono { font-family: var(--mono); }
.mono-id {
  font-family: var(--mono); font-size: 11px; color: var(--cyan);
  background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.25);
  padding: 2px 7px; border-radius: 5px;
}
.danger { color: var(--red); border-color: rgba(248, 113, 113, 0.4); }
.danger:hover { color: #fff; border-color: var(--red); }

.detail-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 20px; }
.detail-head h1 { font-size: 30px; letter-spacing: -1.4px; margin: 0 0 10px; color: #fff; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.detail-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 15px; }
.detail-kpis article { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 15px 17px; }
.detail-kpis span { display: block; font-size: 10px; color: var(--text-3); }
.detail-kpis b { display: block; font-size: 15px; margin-top: 6px; font-family: var(--mono); font-weight: 600; color: #fff; }

/* ---------- 研究计划确认页 ---------- */
.plan-actions { display: flex; gap: 8px; }
.plan-shell { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 15px; align-items: start; }
.plan-main { display: flex; flex-direction: column; gap: 15px; }
.plan-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; }
.plan-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 17px; }
.plan-card-head h2 { font-size: 16px; margin: 0 0 4px; color: #fff; }
.plan-card-head p { font-size: 11px; color: var(--text-3); margin: 0; }
.plan-card-head > .text-button { margin-left: auto; }
.step-num {
  flex: 0 0 34px; height: 34px; border-radius: 10px;
  background: rgba(59, 130, 246, 0.16); border: 1px solid rgba(59, 130, 246, 0.3);
  color: #7db4ff; display: grid; place-items: center;
  font: 700 13px var(--mono);
}
.tag { font-size: 10px; font-weight: 600; padding: 5px 9px; border-radius: 6px; }
.tag.ai-tag { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.3); }
.plan-objective {
  width: 100%; min-height: 84px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 13px; resize: vertical;
  background: rgba(255, 255, 255, 0.04); color: var(--text); font: 12px/1.7 var(--font);
}
.plan-step { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--border); }
.plan-step:first-child { border-top: 0; }
.plan-step-idx { flex: 0 0 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--text-2); display: grid; place-items: center; font: 600 11px var(--mono); }
.plan-step-body { flex: 1; min-width: 0; }
.plan-step-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-step-top b { font-size: 12px; color: var(--text); }
.plan-step-body p { font-size: 11px; color: var(--text-2); margin: 6px 0 3px; line-height: 1.55; }
.plan-step-body small { font-size: 10px; color: var(--text-3); }
.plan-step-ops { display: flex; gap: 4px; }
.plan-step-ops .icon-button { width: 28px; height: 28px; font-size: 13px; }
.data-auth-list { display: flex; flex-direction: column; }
.data-auth-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); }
.data-auth-row:first-child { border-top: 0; }
.data-auth-row > div { flex: 1; min-width: 0; }
.data-auth-row b { font-size: 12px; color: var(--text); display: block; }
.data-auth-row small { font-size: 10px; color: var(--text-3); display: block; margin-top: 4px; }
.auth-state { font-size: 10px; font-weight: 600; color: var(--amber); }
.data-auth-row.granted .auth-state { color: var(--green-bright); }
.budget-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; }
.budget-item { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px; }
.budget-item > span { display: block; font-size: 10px; color: var(--text-3); margin-bottom: 9px; }
.budget-item b { font-size: 18px; font-family: var(--mono); font-weight: 600; color: #fff; }
.budget-item b small { font-size: 11px; color: var(--text-2); }
.seg2 { display: flex; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: rgba(0, 0, 0, 0.2); }
.seg2 button { flex: 1; border: 0; background: transparent; padding: 6px; color: var(--text-3); font: 500 10px var(--font); cursor: pointer; border-radius: 6px; }
.seg2 button.selected { background: rgba(59, 130, 246, 0.3); color: #fff; }

.plan-summary { position: sticky; top: 84px; background: linear-gradient(160deg, rgba(99, 102, 241, 0.16), rgba(11, 18, 32, 0.7)); border: 1px solid rgba(99, 102, 241, 0.32); border-radius: var(--r-md); padding: 22px; }
.plan-summary h2 { font-size: 15px; margin: 0 0 16px; color: #fff; }
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list li { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-2); }
.summary-list li:first-child { border-top: 0; }
.summary-list b { color: #fff; font-family: var(--mono); font-weight: 600; }
.summary-warn { display: flex; gap: 8px; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--r-sm); padding: 11px; margin-top: 14px; }
.summary-warn i { font-style: normal; color: var(--amber); font-weight: 700; }
.summary-warn p { margin: 0; font-size: 10px; color: #fcd34d; line-height: 1.5; }
.summary-note { font-size: 10px; color: var(--text-3); line-height: 1.6; margin: 14px 0; }
.primary-button.full { width: 100%; padding: 12px; }

/* ---------- 任务详情页 ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 15px; align-items: start; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 15px; }
.timeline { margin-top: 18px; }
.timeline-item { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
.timeline-item:last-child::before { display: none; }
.tl-dot { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--border-strong); position: relative; z-index: 1; margin-top: 1px; }
.timeline-item.done .tl-dot { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
.timeline-item.current .tl-dot { background: var(--grad); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18); animation: pulse 2s ease-in-out infinite; }
.timeline-item.pending .tl-dot { background: rgba(255, 255, 255, 0.06); }
.tl-body b { display: block; font-size: 12px; color: var(--text); }
.timeline-item.pending .tl-body b { color: var(--text-3); }
.tl-body small { display: block; font-size: 10px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.checkpoint-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.checkpoint-grid > div { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px; }
.checkpoint-grid span { display: block; font-size: 10px; color: var(--text-3); }
.checkpoint-grid b { display: block; font-size: 16px; font-family: var(--mono); font-weight: 600; color: #fff; margin-top: 6px; }
.checkpoint-note { display: flex; gap: 9px; margin-top: 14px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--r-sm); padding: 12px; }
.checkpoint-note i { font-style: normal; color: var(--green-bright); }
.checkpoint-note p { margin: 0; font-size: 10px; color: #a7f3d0; line-height: 1.55; }
.log-list { margin-top: 14px; }
.log-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 11px; }
.log-item:first-child { border-top: 0; }
.log-time { font-family: var(--mono); color: var(--text-3); font-size: 10px; flex: 0 0 62px; padding-top: 1px; }
.log-dot { flex: 0 0 8px; height: 8px; border-radius: 50%; margin-top: 3px; background: var(--text-3); }
.log-dot.ok { background: var(--green-bright); box-shadow: 0 0 6px rgba(52, 211, 153, 0.5); }
.log-dot.info { background: var(--blue); }
.log-dot.warn { background: var(--amber); }
.log-item p { margin: 0; color: var(--text-2); line-height: 1.5; }
.resource-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 11px; }
.resource-line:first-child { border-top: 0; }
.resource-line span { color: var(--text-3); }
.resource-line b { color: var(--text); font-family: var(--mono); font-weight: 500; font-size: 10px; }
.mini-progress { flex: 1; height: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.mini-progress i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.param-list > div { padding: 12px 0; border-top: 1px solid var(--border); }
.param-list > div:first-child { border-top: 0; }
.param-list span { display: block; font-size: 10px; color: var(--text-3); }
.param-list b { display: block; font-size: 11px; color: var(--text); margin-top: 5px; font-weight: 500; }

/* ---------- 结果详情页 ---------- */
.review-pill { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 9px; background: rgba(245, 158, 11, 0.16); color: var(--amber); }
.review-pill.approved { background: rgba(16, 185, 129, 0.16); color: var(--green-bright); }
.result-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 19px; }
.result-tab { border: 0; background: transparent; padding: 10px 15px; color: var(--text-3); font: 600 12px var(--font); cursor: pointer; position: relative; }
.result-tab.active { color: var(--cyan); }
.result-tab.active::after { content: ""; height: 2px; background: var(--grad); position: absolute; bottom: -1px; left: 12px; right: 12px; border-radius: 2px; }
.result-pane { display: none; }
.result-pane.active { display: block; }
.overview-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 15px; }
.conclusion-text { font-size: 13px; line-height: 1.8; color: var(--text); margin: 18px 0 14px; }
.conclusion-text b { color: #7db4ff; }
.conclusion-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.conclusion-tags .tag { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.25); }
.top3-list { margin-top: 6px; }
.top3-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.top3-item:first-child { border-top: 0; }
.top3-rank { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font: 700 11px var(--mono); }
.top3-item > div { flex: 1; min-width: 0; }
.top3-item b { display: block; font-size: 12px; color: var(--text); }
.top3-item small { display: block; font-size: 10px; color: var(--text-3); margin-top: 4px; }
.neg { color: var(--green-bright); font-family: var(--mono); }
.score { color: var(--cyan); }
.score-pill { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; color: #7db4ff; background: rgba(59, 130, 246, 0.14); padding: 3px 8px; border-radius: 6px; }
.risk { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.risk-low { background: rgba(16, 185, 129, 0.14); color: var(--green-bright); }
.risk-mid { background: rgba(245, 158, 11, 0.14); color: var(--amber); }
.risk-high { background: rgba(248, 113, 113, 0.14); color: var(--red); }
.viz-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 15px; }
.molecule-canvas { display: flex; justify-content: center; margin: 6px 0 4px; }
.cpk-legend { display: flex; justify-content: center; gap: 16px; margin: 6px 0 14px; font-size: 10px; color: var(--text-2); }
.cpk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.cpk-legend i.c { background: #9ca3af; }
.cpk-legend i.n { background: #60a5fa; }
.cpk-legend i.o { background: #f87171; }
.cpk-legend i.cl { background: #4ade80; }
.mol-attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.mol-attr-grid span { display: block; font-size: 10px; color: var(--text-3); }
.mol-attr-grid b { display: block; font-size: 12px; color: var(--text); margin-top: 4px; font-family: var(--mono); font-weight: 500; }
.plddt-chart { display: flex; align-items: flex-end; gap: 1px; height: 170px; margin-top: 18px; }
.plddt-chart i { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; transition: 0.2s; }
.plddt-chart i.c90 { background: #3b82f6; }
.plddt-chart i.c70 { background: #22d3ee; }
.plddt-chart i.c50 { background: #fbbf24; }
.plddt-chart i.c40 { background: #f87171; }
.plddt-chart i:hover { opacity: 0.7; }
.plddt-legend { display: flex; gap: 14px; margin-top: 14px; font-size: 10px; color: var(--text-2); }
.plddt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.binding-chart { width: 100%; height: 205px; margin-top: 16px; }
.bind-grid line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.bind-bars rect { fill: #3b82f6; opacity: 0.4; }
.bind-bars rect.top { fill: #22d3ee; opacity: 0.92; }
.evidence-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr); gap: 15px; align-items: start; }
.evidence-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); }
.evidence-item:first-child { border-top: 0; }
.ev-type { flex: 0 0 40px; font-size: 9px; font-weight: 700; text-align: center; padding: 4px 0; border-radius: 5px; background: rgba(59, 130, 246, 0.14); color: #7db4ff; }
.ev-body { flex: 1; min-width: 0; }
.ev-body b { display: block; font-size: 11px; color: var(--text); }
.ev-body small { display: block; font-size: 10px; color: var(--text-3); margin-top: 4px; font-family: var(--mono); }
.ev-conf { flex: 0 0 auto; font-size: 9px; font-weight: 600; padding: 3px 7px; border-radius: 5px; }
.conf-high { background: rgba(16, 185, 129, 0.14); color: var(--green-bright); }
.conf-mid { background: rgba(245, 158, 11, 0.14); color: var(--amber); }
.conf-low { background: rgba(248, 113, 113, 0.14); color: var(--red); }
.ev-pos { flex: 0 0 auto; font-size: 10px; color: var(--text-3); }
.evidence-flow h2 { font-size: 15px; margin: 0 0 18px; }
.trace-flow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tf-node { width: 100%; text-align: center; padding: 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-strong); font-size: 11px; color: var(--text); }
.tf-node.conclusion { background: var(--grad); color: #fff; border: 0; font-weight: 700; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); }
.tf-node.input { border-color: rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.12); }
.tf-arrow { color: var(--cyan); font-size: 15px; line-height: 1; }
.trace-note { font-size: 10px; color: var(--text-3); line-height: 1.6; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.trace-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.artifact-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); }
.artifact-item:first-child { border-top: 0; }
.artifact-item > div { flex: 1; min-width: 0; }
.artifact-item b { display: block; font-size: 11px; color: var(--text); }
.artifact-item small { display: block; font-size: 10px; color: var(--text-3); margin-top: 4px; }
.artifact-item strong { font-size: 10px; color: var(--text-2); font-family: var(--mono); }
.review-actions { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.review-note { display: flex; gap: 9px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--r-sm); padding: 13px; }
.review-note i { font-style: normal; color: var(--green-bright); }
.review-note p { margin: 0; font-size: 11px; color: #a7f3d0; line-height: 1.6; }

@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 新增页面响应式 ---------- */
@media (max-width: 1050px) {
  .plan-shell, .detail-grid, .evidence-layout { grid-template-columns: 1fr; }
  .plan-summary { position: static; }
  .viz-grid, .overview-grid, .trace-grid { grid-template-columns: 1fr; }
  .budget-grid { grid-template-columns: 1fr 1fr; }
  .detail-head { flex-direction: column; align-items: flex-start; }
  .detail-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .detail-kpis { grid-template-columns: 1fr 1fr; }
  .checkpoint-grid { grid-template-columns: 1fr; }
  .budget-grid { grid-template-columns: 1fr; }
  .trace-grid { grid-template-columns: 1fr; }
  .detail-head h1 { font-size: 26px; }
}