/* ============================================================
 * PPT 编辑预览页（第 2 小步）视觉统一 —— 2026-09-23
 * ------------------------------------------------------------
 * 目标：让「生成 PPT 后的编辑预览页」与前面的「AI 演示生成」「AI 大纲编辑」
 *       使用同一套设计语言（白底 / 浅灰卡片 / 蓝色强调 / 圆角 12–14px / 轻阴影）。
 * 范围：只改 CSS；全部规则限定在 #view-ppt 内，不影响其它页面。
 * 结构（已存在，未改动）：
 *   #pptStage > .pp-tools(顶部工具栏)
 *             > .pp-work(三栏：.pp-film 缩略图 ｜ .pp-canvas 预览 ｜ .pp-insp 设置)
 * ========================================================== */

/* ---------- 1. 顶部工具栏：与大纲页工具栏同款（白底卡片 + 统一按钮） ---------- */
#view-ppt .pp-tools{
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(43,89,214,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.98));
  box-shadow:0 1px 2px rgba(23,58,130,.035), 0 8px 22px rgba(23,58,130,.05);
  margin-bottom:16px;
}
#view-ppt .pp-tools-l,
#view-ppt .pp-tools-r{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#view-ppt .pp-tlab{color:#8296b8;font-size:12px;letter-spacing:.2px}
#view-ppt .pp-tlab b{color:#1a49c8;font-weight:700}
#view-ppt .pp-tools .btn-ghost{
  height:34px;padding:0 14px;border-radius:10px;
  border:1px solid rgba(43,89,214,.18);background:#fff;color:#31527f;
  font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 1px 2px rgba(23,58,130,.04);
  transition:border-color .18s,box-shadow .18s,color .18s,background .18s,transform .18s;
}
#view-ppt .pp-tools .btn-ghost:hover{
  border-color:rgba(47,123,255,.45);color:#1a49c8;background:#f7fbff;
  box-shadow:0 6px 16px rgba(31,86,214,.12);transform:translateY(-1px);
}
#view-ppt .pp-tools .btn-ghost:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
#view-ppt .pp-tools .btn-main{
  height:34px;padding:0 16px;border-radius:10px;font-size:12.5px;font-weight:700;
  background:linear-gradient(135deg,#2f7bff,#1a49c8);
  box-shadow:0 6px 16px rgba(31,86,214,.26);
}
#view-ppt .pp-tools .btn-main:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(31,86,214,.32)}
/* 配色小圆点 */
#view-ppt .pp-sws{gap:7px}
#view-ppt .pp-swd{
  width:24px;height:24px;border-radius:8px;
  border:1.5px solid rgba(43,89,214,.2);cursor:pointer;padding:0;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
#view-ppt .pp-swd:hover{transform:translateY(-1px) scale(1.06);box-shadow:0 6px 14px rgba(31,86,214,.2)}
#view-ppt .pp-swd.on{border-color:#1a49c8;box-shadow:0 0 0 3px rgba(47,123,255,.18)}

/* ---------- 2. 三栏工作区 ---------- */
#view-ppt .pp-work{gap:16px;align-items:start}

/* 左侧缩略图栏：卡片化 */
#view-ppt .pp-film{
  gap:10px;padding:10px;border-radius:14px;
  border:1px solid rgba(43,89,214,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.9));
  box-shadow:0 1px 2px rgba(23,58,130,.035), 0 8px 20px rgba(23,58,130,.045);
  max-height:min(68vh,640px);
}
#view-ppt .pp-film > *{
  border-radius:10px;
  transition:box-shadow .18s,border-color .18s,transform .18s;
}
#view-ppt .pp-film > *:hover{
  border-color:rgba(47,123,255,.45)!important;
  box-shadow:0 8px 20px rgba(31,86,214,.14);
  transform:translateY(-1px);
}

/* 中间预览：16:9 居中 + 圆角 + 阴影 */
#view-ppt .pp-canvas{min-width:0}
#view-ppt .pp-canvas-in{
  border-radius:14px;
  border:1px solid rgba(43,89,214,.14);
  background:#fff;
  box-shadow:0 2px 6px rgba(23,58,130,.06), 0 18px 44px rgba(23,58,130,.1);
  overflow:hidden;
  margin:0 auto;
}
#view-ppt .pp-canvas-foot{
  margin-top:12px;padding:10px 14px;border-radius:11px;
  border:1px solid rgba(43,89,214,.1);
  background:rgba(247,251,255,.8);
  color:#8296b8;font-size:11.5px;line-height:1.6;
}
#view-ppt .pp-canvas-foot b{color:#1a49c8}
/* 画布内浮动工具条（字符样式 / 引用提问）统一成小卡片 */
#view-ppt .pp-stylebar,
#view-ppt .pp-qbar{
  border-radius:11px;
  border:1px solid rgba(43,89,214,.14);
  background:rgba(255,255,255,.98);
  box-shadow:0 10px 28px rgba(23,58,130,.16);
  padding:6px 8px;
}
#view-ppt .pp-styrow{border:none;background:transparent;padding:4px 6px;border-radius:9px}
#view-ppt .pp-styrow:hover{background:rgba(47,123,255,.05)}
#view-ppt .pp-stylab{font-size:11px;color:#8296b8;min-width:44px}
#view-ppt .pp-iconb{
  min-width:26px;height:26px;border-radius:8px;
  border:1px solid rgba(43,89,214,.14);background:#fff;color:#5a6f95;
  font-size:11.5px;line-height:1;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s,box-shadow .18s;
}
#view-ppt .pp-iconb:hover{
  border-color:rgba(47,123,255,.45);color:#1a49c8;background:#f7fbff;
  box-shadow:0 4px 12px rgba(31,86,214,.12);
}
#view-ppt .pp-stysz{font-size:11px;color:#1a49c8;font-weight:700;min-width:34px;text-align:center}

/* ---------- 3. 右侧设置栏：卡片化 + 分组 ---------- */
#view-ppt .pp-insp{
  border-radius:14px;
  border:1px solid rgba(43,89,214,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.98));
  box-shadow:0 1px 2px rgba(23,58,130,.035), 0 10px 26px rgba(23,58,130,.05);
  padding:14px 15px;
  gap:14px;
}
#view-ppt .pp-insp-h{font-size:12.5px;color:#8296b8;letter-spacing:.2px}
#view-ppt .pp-insp-h b{font-size:15px;color:#0b2a66;font-weight:700}
#view-ppt .pp-insp-note{color:#8296b8;font-size:11px;line-height:1.7}
#view-ppt .pp-insp .ipt,
#view-ppt .pp-insp .sel{height:36px;padding:0 11px;font-size:12.5px;border-radius:10px}
#view-ppt .pp-insp .ta{min-height:74px;padding:10px 11px;font-size:12.5px;border-radius:10px}
#view-ppt .pp-insp .btn-ghost,
#view-ppt .pp-insp .btn-main,
#view-ppt .pp-insp .pp-mini{
  height:32px;padding:0 12px;border-radius:10px;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
#view-ppt .pp-insp .btn-ghost{border:1px solid rgba(43,89,214,.18);background:#fff;color:#31527f}
#view-ppt .pp-insp .btn-ghost:hover{border-color:rgba(47,123,255,.45);color:#1a49c8;background:#f7fbff}
/* 分节标题（若渲染出小节标签，统一成浅灰小标题） */
#view-ppt .pp-insp .pp-sect,
#view-ppt .pp-insp .pp-isec,
#view-ppt .pp-insp h4,
#view-ppt .pp-insp h5{
  font-size:12px;font-weight:700;color:#8296b8;letter-spacing:.4px;
  margin:0 0 2px;padding-bottom:6px;border-bottom:1px solid rgba(43,89,214,.1);
}
/* 页面操作区：横向一排卡片按钮，不竖向堆叠 */
#view-ppt .pp-insp .pp-insp-acts,
#view-ppt .pp-insp .pp-oacts,
#view-ppt .pp-insp .pp-acts{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;
}
#view-ppt .pp-insp .pp-insp-acts .pp-iconb,
#view-ppt .pp-insp .pp-oacts .pp-iconb{
  width:36px;height:32px;border-radius:9px;
}

/* ---------- 4. 移动端 / 窄屏：三栏回落为单栏 ---------- */
@media (max-width:1180px){
  #view-ppt .pp-work{grid-template-columns:108px minmax(0,1fr) 240px;gap:12px}
}
@media (max-width:960px){
  #view-ppt .pp-work{grid-template-columns:1fr;gap:14px}
  #view-ppt .pp-film{flex-direction:row;overflow-x:auto;max-height:none}
}