/* ========== CSS Variables (线上像素级精确值) ========== */
:root {
  /* 品牌色 */
  --brand-primary: rgb(69, 88, 255);
  --brand-ink: rgb(50, 107, 251);          /* tab 底线色（线上 ink-bar） */
  --brand-avatar: rgb(112, 109, 255);      /* 头像背景色 */
  --bg-selected: rgb(238, 239, 246);       /* 侧边栏选中态 */

  /* 文字 */
  --text-primary: rgba(0, 0, 0, 0.85);
  --text-regular: rgb(37, 38, 38);
  --text-secondary: rgb(87, 88, 89);
  --text-muted: rgb(137, 138, 140);

  /* 背景 */
  --bg-topbar: rgb(249, 250, 253);
  --bg-sidebar: rgb(255, 255, 255);
  --bg-body: rgb(249, 250, 253);
  --bg-card: rgb(255, 255, 255);
  --bg-hover: rgb(245, 247, 250);

  /* 页面装饰渐变（线上 page-with-decorative-bg） */
  --bg-page-gradient: linear-gradient(rgb(248, 246, 255) -1.34%, rgba(234, 244, 255, 0.1) 8%, rgb(255, 255, 255) 57.94%);

  /* 边框 */
  --border-color: rgb(235, 237, 240);
  --border-light: rgb(240, 242, 245);
  --border-input: rgb(213, 214, 217);

  /* 状态色（线上精确值） */
  --color-error: rgb(250, 78, 62);
  --color-success: rgb(48, 196, 83);
  --color-link: rgb(69, 88, 255);
  --color-btn-primary-bg: rgb(37, 38, 38);
  --color-checked-border: rgb(55, 71, 210);
  --color-config-bg: rgb(252, 252, 253);
  --color-estimate: rgb(69, 88, 255);      /* 费用预估品牌色 */

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 尺寸 */
  --topbar-height: 50px;
  --sidebar-outer-width: 220px;  /* 侧边栏外容器（含 padding） */
  --sidebar-menu-width: 204px;   /* 菜单实际宽度 */

  /* 字体 */
  --font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ========== Reset ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-body);
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }

/* ========== 顶部导航 ========== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--bg-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;                         /* 线上 padding: 0 20px */
  z-index: 100;
}

.topbar__left {
  display: flex;
  align-items: center;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.topbar__logo-icon {
  width: 28px;
  height: 25px;                            /* 线上 logo img: 28x25 */
  background: linear-gradient(135deg, var(--brand-primary), rgb(120, 100, 255));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar__logo-icon svg {
  width: 18px;
  height: 18px;
  fill: white;
}

.topbar__logo-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-regular);
  letter-spacing: 0.5px;
}

.topbar__logo-text span {
  color: var(--brand-primary);
}

.topbar__logo-arrow {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  color: var(--text-muted);
}

.topbar__tabs {
  display: flex;
  align-items: center;
  height: var(--topbar-height);
  margin-left: 24px;                       /* logo 和 tabs 间距 */
  position: relative;
}

.topbar__tab {
  height: 32px;                            /* 线上 tab height: 32px */
  display: flex;
  align-items: center;
  padding: 5px 12px;                       /* 线上 padding: 5px 12px */
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}

.topbar__tab + .topbar__tab {
  margin-left: 16px;                       /* 线上 tab margin-left: 16px */
}

.topbar__tab:hover {
  color: var(--brand-primary);
}

.topbar__tab.active {
  color: var(--brand-primary);
  font-weight: 500;
}

/* active tab 底线：线上 ink-bar 2px, rgb(50,107,251) */
.topbar__tab.active::after {
  content: '';
  position: absolute;
  bottom: -9px;                            /* 定位到 topbar 底边 */
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-ink);
  border-radius: 0;
}

.topbar__right {
  display: flex;
  align-items: center;
}

.topbar__project {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 170px;                            /* 线上 width: 170px */
  height: 32px;                            /* 线上 height: 32px */
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  background: var(--bg-card);
  margin: 9px 0;
}

.topbar__project:hover {
  border-color: var(--brand-primary);
}

.topbar__link {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  margin: 0 0 0 24px;                     /* 线上各链接 margin: 0 24px 0 0，用 margin-left 模拟间距 */
}

.topbar__link:hover {
  color: var(--brand-primary);
}

.topbar__bell {
  margin-left: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.topbar__bell:hover {
  color: var(--brand-primary);
}

.topbar__avatar {
  width: 24px;                             /* 线上 24x24 */
  height: 24px;
  border-radius: 50%;
  background: var(--brand-avatar);         /* 线上 rgb(112, 109, 255) */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;                         /* 线上 14px */
  font-weight: 400;
  cursor: pointer;
  margin-left: 24px;
}

/* ========== 布局容器 ========== */
.layout {
  display: flex;
  padding-top: var(--topbar-height);
  min-height: 100vh;
}

/* ========== 侧边栏 ========== */
.sidebar {
  width: var(--sidebar-outer-width);       /* 线上外容器 220px */
  background: var(--bg-sidebar);
  padding: 8px;                            /* 线上 menuParent padding: 8px */
  flex-shrink: 0;
  overflow-y: auto;
  height: calc(100vh - var(--topbar-height));
  position: sticky;
  top: var(--topbar-height);
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;                         /* 线上 item padding: 8px (all sides) */
  height: 38px;
  line-height: 38px;
  border-radius: var(--radius-md);         /* 线上 border-radius: 8px */
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4px 0 8px;                      /* 线上 margin: 4px 0 8px */
}

.sidebar__item:hover {
  background: var(--bg-hover);
}

.sidebar__item.active {
  background: var(--bg-selected);
  color: var(--text-regular);
  font-weight: 400;                       /* 线上选中态 fontWeight: 400 */
}

.sidebar__item-icon {
  width: 16px;                             /* 线上 icon: 16x16 */
  height: 16px;
  flex-shrink: 0;
  margin-right: 2px;                       /* 线上 icon marginRight: 2px */
}

.sidebar__group {
  margin-top: 0;
}

.sidebar__group-title {
  padding: 0 8px;                         /* 线上 padding: 0 8px */
  margin: 24px 0 12px;                    /* 线上 margin: 24px 0 12px */
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 18px;
  height: 18px;
}

/* ========== 主内容区 ========== */
.main {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  background: var(--bg-page-gradient), var(--bg-card);  /* 线上装饰渐变 */
}

.main__inner {
  padding: 0 40px 24px;                   /* 线上左右各 40px，更接近线上效果 */
}

/* ========== 页面标题栏 ========== */
.page-header {
  padding: 16px 24px 24px;               /* 线上 page-header padding: 16px 24px 24px */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header__title {
  font-size: 18px;
  font-weight: 500;                       /* 线上 fontWeight: 500 */
  color: var(--text-primary);
  line-height: 27px;
}

.page-header__desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* ========== 面包屑（详情页用）— 线上 12px ========== */
.breadcrumb {
  font-size: 12px;
  color: var(--text-muted);
  padding: 16px 24px 0;
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--brand-primary);
}

.breadcrumb .separator {
  margin: 0 8px;
  color: var(--border-input);              /* 线上分隔符 rgb(213,214,217) */
}

.breadcrumb .current {
  color: var(--text-regular);
}

/* ========== 通用按钮（线上精确值） ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 15px;                       /* 线上 padding: 4px 15px */
  height: 32px;
  border-radius: var(--radius-md);         /* 线上 borderRadius: 8px */
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

/* Primary：bg 是黑色 rgb(37,38,38)，不是蓝色！ */
.btn-primary {
  background: var(--color-btn-primary-bg);  /* rgb(37,38,38) */
  color: rgb(255, 255, 255);
  border-color: transparent;
  box-shadow: rgba(0,0,0,0.02) 0px 3px 4px 0px, rgba(0,0,0,0.05) 0px 1px 2px 0px;
}

.btn-primary:hover {
  opacity: 0.85;
}

/* Outline 按钮（线上详情页精确值） */
.btn-outline {
  background: rgb(255, 255, 255);
  color: var(--text-regular);             /* rgb(37,38,38) */
  border-color: var(--border-input);      /* rgb(213,214,217) */
}

.btn-outline:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Link 按钮（使用说明、表格操作链接） */
.btn-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-link);                /* rgb(69,88,255) */
  cursor: pointer;
}

.btn-link:hover {
  opacity: 0.8;
}

/* 筛选 Tab 按钮（全部 / 我创建的） */
.btn-filter {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 1px 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);            /* rgb(87,88,89) */
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-filter:hover {
  background: var(--bg-hover);
}

.btn-filter.active {
  font-weight: 500;
  color: var(--text-regular);              /* rgb(37,38,38) */
  background: var(--border-color);         /* rgb(235,237,240) */
}

/* ========== 通用卡片 ========== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  border: 1px solid var(--border-light);
}

/* ========== 通用表格（线上精确值） ========== */
.table {
  width: 100%;
  border-collapse: separate;              /* 线上 borderCollapse: separate */
  background: transparent;
}

.table th {
  text-align: left;
  padding: 0 12px;                        /* 线上 cell 内 padding: 0 12px */
  height: 40px;                           /* 线上 th height: 40px */
  font-size: 14px;
  font-weight: 400;                       /* 线上 fontWeight: 400 */
  color: var(--text-muted);               /* rgb(137,138,140) */
  background: var(--bg-hover);            /* rgb(245,247,250) */
  border-bottom: 1px solid var(--border-color);
  line-height: 21px;
}

.table td {
  padding: 0 12px;                        /* 线上 cell 内 padding: 0 12px */
  height: 60px;                           /* 线上 td height: 60px */
  font-size: 14px;
  font-weight: 400;
  color: var(--text-regular);             /* rgb(37,38,38) */
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  line-height: 21px;
  vertical-align: middle;
}

.table tr:hover td {
  background: rgb(250, 251, 253);
}

/* 表格内链接 */
.table-link {
  color: var(--color-link);               /* rgb(69,88,255) */
  text-decoration: none;
  font-size: 14px;
}

.table-link:hover {
  opacity: 0.8;
}

/* 表格操作区链接 */
.table-action {
  color: var(--color-link);
  text-decoration: none;
  font-size: 14px;
}

.table-action + .table-action {
  margin-left: 12px;                      /* 线上 margin between links: 12px */
}

.table-action:hover {
  opacity: 0.8;
}

.table-action--danger {
  color: var(--color-error);
}

/* ========== 状态指示器 — 双层圆点结构（线上精确值） ========== */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 4px;                               /* 线上 gap: 4px */
  font-size: 14px;
  font-weight: 400;
  color: var(--text-regular);             /* rgb(37,38,38) */
}

.status-dot__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;                             /* 线上 outer: 9x9 */
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot__indicator::after {
  content: '';
  display: block;
  width: 5px;                             /* 线上 inner: 5x5 */
  height: 5px;
  border-radius: 50%;
}

/* 已完成 */
.status-dot--success .status-dot__indicator {
  background: rgba(48, 196, 83, 0.2);
}
.status-dot--success .status-dot__indicator::after {
  background: var(--color-success);       /* rgb(48,196,83) */
}

/* 已失败 / 已终止 */
.status-dot--failed .status-dot__indicator {
  background: rgba(250, 78, 62, 0.2);
}
.status-dot--failed .status-dot__indicator::after {
  background: var(--color-error);         /* rgb(250,78,62) */
}

/* 运行中（蓝色） */
.status-dot--running .status-dot__indicator {
  background: rgba(69, 88, 255, 0.2);
}
.status-dot--running .status-dot__indicator::after {
  background: var(--brand-primary);
}

/* 排队中（灰色） */
.status-dot--pending .status-dot__indicator {
  background: rgba(137, 138, 140, 0.2);
}
.status-dot--pending .status-dot__indicator::after {
  background: var(--text-muted);
}

/* ========== 通用表单（线上精确值） ========== */
.form-group {
  margin-bottom: 24px;                    /* 线上 marginBottom: 24px */
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 400;                       /* 线上 fontWeight: 400 */
  color: var(--text-secondary);           /* 线上 rgb(87,88,89) */
  line-height: 22px;
  margin-bottom: 8px;                     /* 线上 margin: 0 0 8px */
}

.form-label .required {
  color: var(--color-error);              /* 红色 rgb(250,78,62) */
  margin-left: 2px;
}

.form-hint {
  font-size: 12px;
  color: var(--text-muted);              /* rgb(137,138,140) */
  margin-top: 4px;
}

/* Input — border 用 box-shadow 模拟 */
.form-input {
  width: 100%;
  max-width: 480px;
  height: 32px;                           /* 线上 wrapper height: 32px */
  padding: 1px 12px;                      /* 线上 wrapper padding: 1px 12px */
  border: none;
  border-radius: var(--radius-md);        /* 线上 borderRadius: 8px */
  font-size: 14px;
  color: var(--text-regular);             /* rgb(37,38,38) */
  background: var(--bg-card);
  outline: none;
  transition: box-shadow 0.2s;
  box-shadow: var(--border-input) 0px 0px 0px 1px inset;  /* 线上 border 模拟 */
}

.form-input:focus {
  box-shadow: var(--brand-primary) 0px 0px 0px 1px inset;
}

.form-input.error {
  box-shadow: var(--color-error) 0px 0px 0px 1px inset;
}

/* Select — 同 Input */
.form-select {
  width: 100%;
  max-width: 480px;
  height: 32px;
  padding: 1px 8px 1px 12px;             /* 线上右侧留箭头空间 */
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-regular);
  background: var(--bg-card);
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
  box-shadow: var(--border-input) 0px 0px 0px 1px inset;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23898a8c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.form-select:focus {
  box-shadow: var(--brand-primary) 0px 0px 0px 1px inset;
}

/* Textarea */
.form-textarea {
  width: 100%;
  max-width: 480px;
  padding: 5px 12px;                      /* 线上 padding: 5px 12px */
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-regular);
  background: var(--bg-card);
  outline: none;
  line-height: 21px;                      /* 线上 lineHeight: 21px */
  transition: box-shadow 0.2s;
  box-shadow: var(--border-input) 0px 0px 0px 1px inset;
  resize: vertical;
  font-family: inherit;
}

.form-textarea:focus {
  box-shadow: var(--brand-primary) 0px 0px 0px 1px inset;
}

/* Error Message */
.form-error {
  color: var(--color-error);              /* rgb(250,78,62) */
  font-size: 12px;
  line-height: 18px;
  padding-top: 2px;
}

/* ========== 选择卡片 Radio Card（线上精确值） ========== */
.selectable-card {
  position: relative;
  border: 1px solid var(--border-light);  /* rgb(240,242,245) */
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 11px 15px;                     /* 线上 padding: 11px 15px */
  cursor: pointer;
  transition: border-color 0.2s;
}

.selectable-card:hover {
  border-color: var(--color-checked-border);
}

.selectable-card.checked {
  border-color: var(--color-checked-border); /* rgb(55,71,210) */
  background: transparent;
}

/* 右上角 check icon — 蓝色实心圆 + 白色勾 */
.selectable-card.checked::after {
  content: '✓';
  position: absolute;
  right: 12px;                            /* 线上 right: 12px */
  top: 9px;                               /* 线上 top: 9px */
  width: 16px;
  height: 16px;
  background: rgb(69, 88, 255);
  border-radius: 50%;
  font-size: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selectable-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-regular);            /* rgb(37,38,38) */
}

.selectable-card__desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);             /* rgb(137,138,140) */
  line-height: 18px;
  margin-top: 4px;
}

/* ========== 区块标题 Section Title（线上精确值） ========== */
.section-title {
  font-size: 16px;
  font-weight: 500;
  color: rgb(0, 0, 0);
  margin: 0 0 24px;
  line-height: 24px;
}

/* ========== 配置概要面板 Config Panel（线上精确值） ========== */
.config-panel {
  background: var(--color-config-bg);     /* rgb(252,252,253) */
  border: 1px solid var(--border-light);  /* rgb(240,242,245) */
  border-radius: var(--radius-md);
  padding: 16px;
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
}

.config-panel__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-regular);
  margin-bottom: 16px;
}

.config-panel__row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 18px;
}

.config-panel__label {
  font-size: 12px;
  color: var(--text-muted);
  padding-right: 16px;                   /* 线上 padding-right: 16px */
  flex-shrink: 0;
  min-width: 70px;
}

.config-panel__value {
  font-size: 12px;
  color: var(--text-regular);
}

.config-panel__value--highlight {
  font-size: 12px;
  color: var(--color-estimate);            /* 费用预估蓝紫色 rgb(69,88,255) */
}

.config-panel__footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.config-panel__footer .btn {
  width: 100%;                            /* 线上 submit 全宽 */
}

/* ========== 搜索框（线上精确值） ========== */
.search-input {
  position: relative;
  width: 320px;
  height: 32px;
}

.search-input__field {
  width: 100%;
  height: 32px;
  padding: 1px 12px 1px 32px;            /* 左侧留搜索图标空间 */
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-regular);
  background: var(--bg-card);
  outline: none;
  box-shadow: var(--border-input) 0px 0px 0px 1px inset;
  transition: box-shadow 0.2s;
}

.search-input__field:focus {
  box-shadow: var(--brand-primary) 0px 0px 0px 1px inset;
}

.search-input__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

/* ========== Tab 切换（内容区 — 线上详情页精确值） ========== */
.content-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;                    /* 线上 tabs header margin-bottom: 4px */
}

.content-tab {
  height: 32px;                           /* 线上 height: 32px */
  padding: 4px 20px;                      /* 线上 normal padding: 4px 20px */
  font-size: 14px;
  font-weight: 400;                       /* 线上 normal fontWeight: 400 */
  color: var(--text-secondary);           /* 线上 normal rgb(87,88,89) */
  line-height: 21px;                      /* 线上 lineHeight: 21px */
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}

.content-tab:hover {
  color: var(--text-regular);
}

.content-tab.active {
  color: var(--text-regular);             /* 线上 active rgb(37,38,38) */
  font-weight: 500;                       /* 线上 active fontWeight: 500 */
  border-bottom-color: var(--brand-primary); /* 线上 ink-bar rgb(69,88,255) */
  border-bottom-left-radius: 1px;         /* 线上 ink-bar borderRadius: 1px */
  border-bottom-right-radius: 1px;
}

/* ========== 详情页标题 Detail Title（线上精确值） ========== */
.detail-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-regular);             /* rgb(37,38,38) */
  line-height: 24px;
}

/* ========== 状态徽章 Status Badge（详情页标题旁 — 线上精确值） ========== */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 1px 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);             /* rgba(0,0,0,0.85) */
  border-radius: var(--radius-sm);        /* 4px */
  vertical-align: middle;
}

.status-badge--success {
  background: rgba(218, 247, 221, 0.6);  /* 已完成 */
}

.status-badge--failed {
  background: rgba(250, 78, 62, 0.2);    /* 已失败 */
}

.status-badge--running {
  background: rgba(219, 234, 254, 0.6);  /* 运行中 */
}

/* ========== 键值对 KV Pair（详情页基本信息/训练配置 — 线上精确值） ========== */
.kv-pair {
  display: flex;
  align-items: center;
  height: 22px;
  margin-bottom: 8px;
}

.kv-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);              /* rgb(137,138,140) */
  width: 80px;                           /* 线上 label width: 80px */
  flex-shrink: 0;
}

.kv-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-regular);            /* rgb(37,38,38) */
}

/* ========== 空状态 ========== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state__text {
  font-size: 14px;
}

/* ========== 效果指标页 — 图表卡片 ========== */
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);   /* rgb(240,242,245) */
  border-radius: var(--radius-md);         /* 8px */
  padding: 16px 16px 0;
  height: 351px;
  overflow: hidden;
}

.chart-card-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);              /* rgba(0,0,0,0.85) */
  line-height: 21px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light); /* rgb(240,242,245) */
  display: flex;
  align-items: center;
  gap: 4px;
}

.chart-card-title .help-icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);               /* rgb(137,138,140) */
  flex-shrink: 0;
  cursor: help;
}

.chart-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ========== Modal Dialog 弹窗 ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  width: 1000px;
  max-height: 80vh;
  background: var(--bg-card);
  border-radius: var(--radius-lg);         /* 12px */
  box-shadow: rgba(12, 18, 31, 0.08) 0px 8px 16px -8px,
              rgba(12, 18, 31, 0.08) 0px 1px 8px 0px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-header {
  padding: 24px 48px 16px 24px;
  flex-shrink: 0;
}

.modal-header__title {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);              /* rgba(0,0,0,0.85) */
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);            /* rgb(87,88,89) */
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.modal-close:hover {
  color: var(--text-regular);
}

.modal-body {
  padding: 8px 24px 24px;
  overflow: auto;
  flex: 1;
}

/* ========== Segment Tabs 切换按钮组 ========== */
.segment-tabs {
  display: inline-flex;
  align-items: center;
  padding: 3px 4px;
  border-radius: var(--radius-md);         /* 8px */
  border: 1px solid var(--border-input);   /* rgb(213,214,217) */
  height: 32px;
  gap: 0;
  background: var(--bg-card);
}

.segment-tab {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);            /* rgb(87,88,89) */
  background: transparent;
  padding: 1px 10px;
  border-radius: 6px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.segment-tab:hover {
  color: var(--text-regular);
}

.segment-tab.active {
  font-weight: 500;
  color: var(--text-regular);              /* rgb(37,38,38) */
  background: var(--border-color);         /* rgb(235,237,240) */
}

/* ========== Modal Sidebar 弹窗内分类列表 ========== */
.modal-sidebar {
  width: 300px;
  padding: 16px;
  border-right: 1px solid var(--border-color); /* rgb(235,237,240) */
  flex-shrink: 0;
  overflow-y: auto;
}

.modal-sidebar-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);               /* rgb(137,138,140) */
  margin-bottom: 8px;
}

.modal-sidebar-item {
  height: 48px;
  padding: 12px;
  border-radius: var(--radius-sm);        /* 4px */
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-regular);
  transition: background 0.15s;
}

.modal-sidebar-item:hover {
  background: var(--bg-hover);
}

.modal-sidebar-item.active {
  background: rgb(240, 247, 255);
}

/* ========== Model Item 模型选项卡片 ========== */
.model-item {
  padding: 12px 16px;
  border: 1px solid var(--border-light);   /* rgb(240,242,245) */
  border-radius: var(--radius-md);         /* 8px */
  cursor: pointer;
  transition: border-color 0.15s;
}

.model-item:hover {
  border-color: var(--border-input);
}

.model-item + .model-item {
  margin-top: 8px;
}

.model-item-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-regular);              /* rgb(37,38,38) */
}

.model-item-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);               /* rgb(137,138,140) */
  margin-top: 4px;
}

/* ========== Tag 标签 ========== */
.tag {
  font-size: 12px;
  color: var(--text-secondary);            /* rgb(87,88,89) */
  background: var(--bg-hover);             /* rgb(245,247,250) */
  padding: 0 6px;
  border-radius: var(--radius-sm);         /* 4px */
  height: 20px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ========== 表头筛选/排序图标 ========== */
/* 可筛选表头 */
.th-filterable { cursor: pointer; }
.th-filterable::after {
  content: '▽';
  margin-left: 4px;
  font-size: 10px;
  color: var(--text-muted);
}
/* 可排序表头 */
.th-sortable { cursor: pointer; }
.th-sortable::after {
  content: '↕';
  margin-left: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

/* ========== 字符计数内嵌 ========== */
.form-input-wrapper {
  position: relative;
  max-width: 480px;
}
.form-counter {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
/* textarea 的计数器在右下角 */
.form-textarea-wrapper {
  position: relative;
  max-width: 480px;
}
.form-textarea-wrapper .form-counter {
  top: auto;
  bottom: 8px;
  transform: none;
}

/* ========== Radio Button 单选按钮 ========== */
.radio-group {
  display: flex;
  align-items: center;
  gap: 24px;
}
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-regular);
  cursor: pointer;
}
.radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-input);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.radio-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s;
}
.radio-label.active .radio-dot {
  border-color: var(--brand-primary);
}
.radio-label.active .radio-dot::after {
  background: var(--brand-primary);
}

/* ========== 标签添加按钮（圆形） ========== */
.tag-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-input);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  background: transparent;
  transition: all 0.15s;
}
.tag-add:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}