/* tool-btn.css —— 五个创作工具页的工具栏按钮统一规范
 *
 * 用在：创意画板(drawpad) / 流程图(flowchart) / 思维导图(mindmap) /
 *       会议白板(meetingboard) / 创作工作流(app.html 的 #workflowPage)
 *
 * 为什么有它：这几页原来各写各的按钮色，加起来 **6 种色相** ——
 *   紫(#8b5cf6 AI类) / 蓝(#3b82f6 上传、复制) / 绿(#059669 导出PPT) /
 *   红(#ef4444 删除) / 淡红(清空) / 淡绿(加节点圆点)，
 * 跟项目其余部分（主按钮蓝、次要中性描边）差得远。
 * 现在收敛成三档：
 *
 *   .tool-btn            中性 —— 上传 / 导出 / 复制 / 保存 / 加节点 这类
 *   .tool-btn.primary    主操作 —— AI分析 / AI生成 / 生成全部（项目蓝 #3B82F6）
 *   .tool-btn.danger     危险 —— 清空 / 删除
 *
 * ⚠️ 颜色全部写死，不要改成 var(--xxx)：见 docs/ui-standard.md 第 2 条 ——
 *    :root 那套是浅色皮肤，深色页面上取到的值不对。
 * ⚠️ 这几页是独立页（自己的 <style>），所以单独一个 css 文件让它们 <link> 进来；
 *    改这里五页一起变。
 */

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  /* 统一高度：原来是各页靠内边距+字号自己撑出来的（32px），跟创意画板的 36px 不齐。
     定在这里，五页就都一样了（border-box 是全局的，height 含 padding+border）。 */
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tool-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.tool-btn:active { transform: scale(0.97); }

/* 主操作：项目主色（与 app 里 .primary-btn 同一个蓝） */
.tool-btn.primary { background: #3B82F6; border-color: #3B82F6; color: #fff; }
.tool-btn.primary:hover { background: #2563EB; border-color: #2563EB; color: #fff; }
.tool-btn.primary:disabled { background: #334155; border-color: #334155; color: #94a3b8; opacity: 1; cursor: not-allowed; transform: none; }

/* 危险：清空 / 删除 */
.tool-btn.danger { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: #f87171; }
.tool-btn.danger:hover { background: rgba(239, 68, 68, 0.25); border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; }

/* 小一号（工具栏里次要按钮用） */
.tool-btn.sm { height: 32px; padding: 0 11px; font-size: 12px; }