/* ============================================================
 * PPT 在线设计工作台 —— 结构重构样式（2026-09-23）
 * ------------------------------------------------------------
 * 新结构（js/ppt.js 的 pptBuildStageStd 生成）：
 *   #pptStage
 *     ├─ .pp-tools            顶部固定工具栏（13 个圆角卡片按钮，横向不堆叠）
 *     └─ .pp-work             三栏：.pp-rail(缩略图) ｜ .pp-stage(画布) ｜ .pp-insp(属性)
 * 设计目标：第一眼看到的是中间的 PPT 页面，而不是配置文字。
 * 全部规则限定 #view-ppt，不影响其它页面。
 * ========================================================== */

/* ---------- 1. 三栏：缩略图窄 / 画布尽量大 / 属性固定 ---------- */
#view-ppt .pp-work{
  display:grid;
  grid-template-columns:218px minmax(0,1fr) 330px;
  gap:14px;
  align-items:stretch;
  min-height:0;
}

/* ---------- 2. 左栏：页面管理（真实缩略图 + 第N页） ---------- */
#view-ppt .pp-rail{
  display:flex;flex-direction:column;min-height:0;
  border-radius:14px;padding:10px;
  border:1px solid rgba(43,89,214,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(246,250,255,.94));
  box-shadow:0 1px 2px rgba(23,58,130,.04), 0 10px 24px rgba(23,58,130,.05);
}
#view-ppt .pp-rail-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 4px 9px;margin-bottom:8px;
  border-bottom:1px solid rgba(43,89,214,.1);
  font-size:12px;font-weight:700;color:#8296b8;letter-spacing:.4px;
}
#view-ppt .pp-rail-add{
  width:26px;height:26px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(43,89,214,.18);background:#fff;color:#1a49c8;
  font-size:15px;line-height:1;display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(23,58,130,.05);
  transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;
}
#view-ppt .pp-rail-add:hover{
  border-color:rgba(47,123,255,.5);background:#f7fbff;
  box-shadow:0 6px 16px rgba(31,86,214,.16);transform:translateY(-1px);
}
#view-ppt .pp-film{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;padding:2px;
}
#view-ppt .pp-thumb{
  position:relative;display:flex;flex-direction:column;
  padding:0 0 6px;border-radius:11px;cursor:pointer;
  border:2px solid transparent;background:#fff;
  box-shadow:0 1px 3px rgba(23,58,130,.09);
  transition:border-color .18s,box-shadow .18s,transform .18s,opacity .18s;
}
#view-ppt .pp-thumb:hover{border-color:rgba(47,123,255,.45);box-shadow:0 8px 20px rgba(31,86,214,.14);transform:translateY(-1px)}
#view-ppt .pp-thumb.on{border-color:#1a49c8;box-shadow:0 0 0 3px rgba(47,123,255,.18), 0 10px 24px rgba(31,86,214,.16)}
#view-ppt .pp-thumb-in{
  width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:#fff;
}
#view-ppt .pp-thumb-lb{
  display:block;padding:5px 6px 0;text-align:center;
  font-size:11px;font-weight:600;color:#8296b8;
}
#view-ppt .pp-thumb.on .pp-thumb-lb{color:#1a49c8}
#view-ppt .pp-thumb.dragging{opacity:.45}
#view-ppt .pp-thumb.drop-target{border-color:#2f7bff;box-shadow:0 0 0 3px rgba(47,123,255,.22)}

/* ---------- 3. 中栏：灰色工作区 + 居中大画布（页面是主角） ---------- */
#view-ppt .pp-stage{
  display:flex;flex-direction:column;min-width:0;min-height:0;
}
#view-ppt .pp-canvas{
  flex:1 1 auto;min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:18px;border-radius:14px;
  /* 画布区做成"工作台底色"，让白色 PPT 页面凸显出来 */
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.9), rgba(238,243,250,.9)),
    repeating-linear-gradient(45deg, rgba(43,89,214,.028) 0 10px, transparent 10px 20px);
  border:1px solid rgba(43,89,214,.1);
  box-shadow:inset 0 1px 3px rgba(23,58,130,.05);
}
#view-ppt .pp-canvas-in{
  position:relative;
  aspect-ratio:auto;                 /* 由 JS 按可用空间精确设定宽高，保证 16:9 */
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(43,89,214,.14);
  box-shadow:0 2px 8px rgba(23,58,130,.08), 0 24px 56px rgba(23,58,130,.14);
  margin:0 auto;
  flex:0 0 auto;
}
#view-ppt .pp-canvas-foot{
  flex:0 0 auto;margin-top:10px;padding:8px 14px;border-radius:11px;
  border:1px solid rgba(43,89,214,.1);background:rgba(247,251,255,.85);
  color:#8296b8;font-size:11.5px;line-height:1.6;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
#view-ppt .pp-pageidx{color:#5a6f95;white-space:nowrap}
#view-ppt .pp-pageidx b{color:#1a49c8;font-weight:700}

/* ---------- 4. 右栏：组件化属性面板（不堆文字） ---------- */
#view-ppt .pp-insp{
  border-radius:14px;padding:14px 15px;gap:13px;
  border:1px solid rgba(43,89,214,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,251,255,.97));
  box-shadow:0 1px 2px rgba(23,58,130,.04), 0 10px 26px rgba(23,58,130,.055);
  min-height:0;max-height:none;overflow-y:auto;
}
#view-ppt .pp-insp-h{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:#8296b8;padding-bottom:10px;
  border-bottom:1px solid rgba(43,89,214,.1);
}
#view-ppt .pp-insp-h b{font-size:15px;color:#0b2a66;font-weight:700}
/* 小节标题统一为浅灰小标题 */
#view-ppt .pp-igrp > label{
  font-size:11px;font-weight:700;color:#8296b8;letter-spacing:.5px;
}
#view-ppt .pp-igrp{margin-bottom:2px}

/* ---------- 5. 顶部工具栏：固定 + 横向 + 圆角卡片，不堆叠 ---------- */
#view-ppt .pp-tools{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 13px;border-radius:14px;
  border:1px solid rgba(43,89,214,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(246,250,255,.97));
  backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(23,58,130,.04), 0 10px 26px rgba(23,58,130,.06);
  margin-bottom:12px;
}
#view-ppt .pp-tools-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#view-ppt .pp-tools-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
#view-ppt .pp-tools-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#view-ppt .pp-tools .btn-ghost,
#view-ppt .pp-tools .btn-main{
  height:32px;padding:0 12px;border-radius:10px;
  font-size:12.5px;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:border-color .18s,box-shadow .18s,color .18s,background .18s,transform .18s;
}
#view-ppt .pp-tools .btn-ghost{
  border:1px solid rgba(43,89,214,.16);background:#fff;color:#31527f;
  box-shadow:0 1px 2px rgba(23,58,130,.04);
}
#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-ghost.pp-danger{color:#c23b3b;border-color:rgba(214,69,69,.28)}
#view-ppt .pp-tools .btn-main{
  border:none;color:#fff;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);transform:translateY(-1px)}

/* ---------- 6. 窄屏回退 ---------- */
@media (max-width:1280px){
  #view-ppt .pp-work{grid-template-columns:184px minmax(0,1fr) 300px}
}
@media (max-width:1080px){
  #view-ppt .pp-work{grid-template-columns:1fr}
  #view-ppt .pp-rail{max-height:210px}
  #view-ppt .pp-film{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  #view-ppt .pp-film .pp-thumb{flex:0 0 150px}
}