iAOP/web/studio/studio.css

/* iAOP 模板配置台样式（issue #132 / PRD 5.7）。Ant Design 5 token 调色（2026-08 全站 AntD Pro 重构）。 */
:root {
  /* 默认值 = Ant Design 5 亮色 token（与 shared/pro.css 一致；
     pro.css 在后加载会再次确认，plan themeTokens 可运行时覆盖） */
  --cockpit-bg: #f0f2f5;
  --cockpit-surface: #ffffff;
  --cockpit-fg: rgba(0, 0, 0, 0.88);
  --cockpit-fg-muted: rgba(0, 0, 0, 0.45);
  --cockpit-accent: #1677ff;
  --cockpit-warn: #faad14;
  --cockpit-grid-line: rgba(5, 5, 5, 0.06);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
       background: var(--cockpit-bg); color: var(--cockpit-fg); }

#topbar { display: flex; align-items: center; justify-content: space-between;
          padding: 10px 16px; background: var(--cockpit-surface);
          border-bottom: 1px solid var(--cockpit-grid-line); }
#topbar h1 { font-size: 18px; margin: 0; color: var(--cockpit-accent); }
#topbar .sub { font-size: 12px; color: var(--cockpit-fg-muted); font-weight: 400; }
#topbar-right { display: flex; align-items: center; gap: 8px; font-size: 13px;
                color: var(--cockpit-fg-muted); }

#tabs { display: flex; gap: 4px; padding: 8px 16px 0; }
.tab { padding: 8px 18px; border: 1px solid var(--cockpit-grid-line); border-bottom: none;
       border-radius: 8px 8px 0 0; background: transparent; color: var(--cockpit-fg-muted);
       cursor: pointer; font-size: 14px; }
.tab.active { background: var(--cockpit-surface); color: var(--cockpit-accent); }

.page { display: none; padding: 12px 16px 24px; }
.page.active { display: block; }
.panel { background: var(--cockpit-surface); border: 1px solid var(--cockpit-grid-line);
         border-radius: 8px; padding: 14px 16px; }
.panel h2 { font-size: 14px; margin: 0 0 10px; color: var(--cockpit-accent); }
.hint { font-size: 12px; color: var(--cockpit-fg-muted); }
.row { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }

select, input, textarea { padding: 7px 10px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--cockpit-grid-line); background: var(--cockpit-bg);
  color: var(--cockpit-fg); }
textarea { width: 100%; font-family: Consolas, monospace; }
button { padding: 7px 16px; border: none; border-radius: 6px; cursor: pointer;
         background: #1e293b; color: var(--cockpit-fg); font-size: 13px; }
button.primary { background: var(--cockpit-accent); color: #ffffff; }
button:disabled { opacity: .4; cursor: not-allowed; }
button.danger { background: #ff4d4f; color: #cf1322; }

/* 三栏布局（超参页 / 编排页） */
.split { display: grid; grid-template-columns: 220px 1fr 320px; gap: 12px; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ① 导入页 */
.drop-zone { border: 2px dashed var(--cockpit-grid-line); border-radius: 8px;
             padding: 18px; text-align: center; color: var(--cockpit-fg-muted);
             margin-bottom: 10px; }
.drop-zone.dragover { border-color: var(--cockpit-accent); color: var(--cockpit-accent); }
#import-progress { height: 10px; background: var(--cockpit-bg); border-radius: 5px;
                  overflow: hidden; margin-top: 8px; }
#import-progress-bar { height: 100%; width: 0; background: var(--cockpit-accent);
                      transition: width .1s; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--cockpit-grid-line);
         text-align: left; }
th { color: var(--cockpit-fg-muted); font-weight: 400; }
.sev-error { color: #ff4d4f; }
.sev-warning { color: var(--cockpit-warn); }
#import-summary { margin-top: 10px; font-size: 13px; }

/* ② 超参配置页 */
.tree ul { list-style: none; padding: 0; margin: 0; }
.tree li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.tree li.active { background: var(--cockpit-bg); color: var(--cockpit-accent); }
.form-item { margin-bottom: 12px; }
.form-item label { display: block; font-size: 13px; margin-bottom: 4px; }
.form-item .meta { font-size: 11px; color: var(--cockpit-fg-muted); margin-top: 2px; }
.form-item input { width: 100%; }
.json-view { background: var(--cockpit-bg); border-radius: 6px; padding: 10px;
             font-size: 12px; font-family: Consolas, monospace; overflow: auto;
             max-height: 480px; white-space: pre; }

/* ③ 驾驶舱编排页 */
#widget-lib-list { list-style: none; padding: 0; margin: 0; }
#widget-lib-list li { padding: 8px 10px; margin-bottom: 6px; border-radius: 6px;
  background: var(--cockpit-bg); cursor: pointer; font-size: 13px;
  border: 1px solid var(--cockpit-grid-line); }
#widget-lib-list li:hover { border-color: var(--cockpit-accent); }
#canvas { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 34px;
  gap: 6px; min-height: 320px; background: var(--cockpit-bg); border-radius: 8px;
  padding: 8px; }
.canvas-widget { border: 1px solid var(--cockpit-accent); border-radius: 6px;
  background: rgba(22,119,255,.08); font-size: 12px; padding: 4px 6px;
  cursor: pointer; overflow: hidden; position: relative; }
.canvas-widget.selected { outline: 2px solid var(--cockpit-warn); }
.canvas-widget .ops { position: absolute; right: 4px; top: 2px; }
.canvas-widget .ops button { padding: 0 6px; font-size: 11px; background: transparent;
  color: var(--cockpit-fg-muted); }

/* ④ 版本页 */
.status-published { color: var(--cockpit-accent); }
.status-rolledback { color: var(--cockpit-warn); }
.diff-add { color: #52c41a; }
.diff-del { color: #ff4d4f; }
.diff-ctx { color: var(--cockpit-fg-muted); }

@media (max-width: 1100px) {
  .split, .split-2 { grid-template-columns: 1fr; }
}