/* ============================================================
 * PPT 实时编辑工作台 —— P1 重构样式（2026-09-23）
 * ------------------------------------------------------------
 * 范围：只改样式；全部限定 #view-ppt，不影响其它页面。
 * 设计语言：与「AI 演示生成 / AI 大纲编辑」一致 ——
 *           白底 + 玻璃卡片（浅色渐变 + 轻阴影）+ 蓝色强调 + 12–14px 圆角。
 * 布局：三栏 15% / 60% / 25%（缩略图 ｜ 实时画布 ｜ 属性面板）。
 * ========================================================== */

/* ---------- 1. 三栏比例 15 / 60 / 25 ---------- */
#view-ppt .pp-work{
  display:grid;
  grid-template-columns:minmax(150px,15%) minmax(0,60%) minmax(240px,25%);
  gap:14px;
  align-items:start;
}

/* ---------- 2. 顶部工具栏：四组、横向、玻璃卡片 ---------- */
#view-ppt .pp-tools{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;border-radius:14px;
  border:1px solid rgba(43,89,214,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(246,250,255,.96));
  box-shadow:0 1px 2px rgba(23,58,130,.04), 0 10px 26px rgba(23,58,130,.06);
  margin-bottom:14px;
  position:relative;z-index:20;
}
#view-ppt .pp-tools-l,
#view-ppt .pp-tools-m,
#view-ppt .pp-tools-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#view-ppt .pp-tools-m{margin-left:auto}
#view-ppt .pp-tools-r{margin-left:auto}
#view-ppt .pp-tsep2{width:1px;height:20px;background:rgba(43,89,214,.14);margin:0 3px}
#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;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  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-ghost.pp-danger:hover{color:#d64545;background:#fff7f6;border-color:rgba(214,69,69,.5)}
#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)}
#view-ppt .pp-tools .pp-tlab{color:#8296b8;font-size:11.5px;letter-spacing:.2px}
#view-ppt .pp-tools .pp-tlab b{color:#1a49c8;font-weight:700}
#view-ppt .pp-tools .pp-sws{gap:6px}
#view-ppt .pp-tools .pp-swd{
  width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(43,89,214,.18);
  cursor:pointer;padding:0;transition:transform .16s,box-shadow .16s,border-color .16s;
}
#view-ppt .pp-tools .pp-swd:hover{transform:translateY(-1px) scale(1.07);box-shadow:0 6px 14px rgba(31,86,214,.2)}
#view-ppt .pp-tools .pp-swd.on{border-color:#1a49c8;box-shadow:0 0 0 3px rgba(47,123,255,.2)}

/* ---------- 3. 字体主题浮层 ---------- */
#view-ppt .pp-fwrap{position:relative;display:inline-flex}
#view-ppt .pp-fpop{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  display:none;min-width:264px;padding:12px;
  border-radius:13px;border:1px solid rgba(43,89,214,.16);background:#fff;
  box-shadow:0 18px 44px rgba(23,58,130,.2), 0 2px 6px rgba(23,58,130,.08);
}
#view-ppt .pp-fpop.on{display:block}
#view-ppt .pp-fp-hd{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:700;color:#0b2a66;
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid rgba(43,89,214,.1)}
#view-ppt .pp-fp-hd span{font-size:11px;font-weight:400;color:#8296b8}
#view-ppt .pp-fg{display:flex;align-items:center;gap:10px;margin-bottom:9px}
#view-ppt .pp-fg label{flex:0 0 62px;font-size:12px;color:#5a6f95}
#view-ppt .pp-fg .sel{flex:1 1 auto;height:34px;padding:0 10px;border-radius:9px;font-size:12.5px}
#view-ppt .pp-fp-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid rgba(43,89,214,.1)}

/* ---------- 4. 左侧缩略图：玻璃卡片 + 拖拽 + 高亮 ---------- */
#view-ppt .pp-film{
  gap:9px;padding:10px;border-radius:14px;
  border:1px solid rgba(43,89,214,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.9));
  box-shadow:0 1px 2px rgba(23,58,130,.04), 0 10px 24px rgba(23,58,130,.05);
  max-height:min(70vh,660px);overflow-y:auto;
}
#view-ppt .pp-thumb{
  position:relative;border-radius:11px;cursor:pointer;
  border:2px solid transparent;background:#fff;
  box-shadow:0 1px 3px rgba(23,58,130,.08);
  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.dragging{opacity:.45}
#view-ppt .pp-thumb.drop-target{border-color:#2f7bff;box-shadow:0 0 0 3px rgba(47,123,255,.22)}

/* ---------- 5. 缩略图右键菜单 ---------- */
#view-ppt .pp-thumbmenu{
  position:fixed;z-index:2000;display:none;min-width:178px;padding:6px;
  border-radius:12px;border:1px solid rgba(43,89,214,.16);background:#fff;
  box-shadow:0 18px 44px rgba(23,58,130,.22), 0 2px 6px rgba(23,58,130,.08);
}
#view-ppt .pp-thumbmenu.on{display:block}
#view-ppt .pp-cm-hd{padding:6px 10px 8px;font-size:11px;font-weight:700;color:#8296b8;
  border-bottom:1px solid rgba(43,89,214,.1);margin-bottom:4px}
#view-ppt .pp-cm-it{
  display:block;width:100%;padding:8px 10px;border:none;border-radius:9px;background:transparent;
  font-family:inherit;font-size:12.5px;color:#31527f;text-align:left;cursor:pointer;
  transition:background .16s,color .16s;
}
#view-ppt .pp-cm-it:hover{background:rgba(47,123,255,.07);color:#1a49c8}
#view-ppt .pp-cm-it:disabled{opacity:.4;cursor:not-allowed}
#view-ppt .pp-cm-it.del{color:#c23b3b}
#view-ppt .pp-cm-it.del:hover{background:#fff2f1;color:#d64545}
#view-ppt .pp-cm-sp{display:block;height:1px;background:rgba(43,89,214,.1);margin:4px 6px}

/* ---------- 6. 右侧属性面板：玻璃卡片 + 视觉化版式卡片 ---------- */
#view-ppt .pp-insp{
  border-radius:14px;padding:14px 15px;gap:14px;
  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);
  max-height:min(72vh,700px);overflow-y:auto;
}
#view-ppt .pp-insp-h{font-size:12.5px;color:#8296b8}
#view-ppt .pp-insp-h b{font-size:15px;color:#0b2a66;font-weight:700}
#view-ppt .pp-igrp{display:flex;flex-direction:column;gap:8px}
#view-ppt .pp-igrp > label{font-size:11.5px;font-weight:700;color:#8296b8;letter-spacing:.4px}
/* 视觉化版式卡片（带迷你示意图） */
#view-ppt .pp-lays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#view-ppt .pp-layc{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:10px 8px;border-radius:12px;cursor:pointer;font-family:inherit;
  border:1.5px solid rgba(43,89,214,.16);background:#fff;
  transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;
}
#view-ppt .pp-layc:hover{border-color:rgba(47,123,255,.5);box-shadow:0 8px 20px rgba(31,86,214,.12);transform:translateY(-1px)}
#view-ppt .pp-layc.on{border-color:#1a49c8;background:rgba(47,123,255,.05);box-shadow:0 0 0 3px rgba(47,123,255,.14)}
#view-ppt .pp-layc.dis{opacity:.45;cursor:not-allowed}
#view-ppt .pp-layc.dis:hover{border-color:rgba(43,89,214,.16);box-shadow:none;transform:none}
#view-ppt .pp-layc b{font-size:11.5px;font-weight:700;color:#31527f}
#view-ppt .pp-layc.on b{color:#1a49c8}
/* 迷你示意图：用 4 个格子拼出 1 / 2 / 3 / 4 栏结构 */
#view-ppt .pp-layc-dia{
  display:grid;gap:3px;width:100%;height:34px;padding:4px;
  border-radius:7px;background:rgba(47,123,255,.06);border:1px solid rgba(43,89,214,.12);
}
#view-ppt .pp-layc-dia i{display:block;border-radius:2px;background:rgba(47,123,255,.42)}
#view-ppt .pp-layc-dia i:nth-child(n+3){display:none}
#view-ppt .pp-layc-dia.d-content{grid-template-columns:1fr;grid-template-rows:8px 1fr}
#view-ppt .pp-layc-dia.d-content i:nth-child(1){display:block;grid-column:1;background:rgba(47,123,255,.75)}
#view-ppt .pp-layc-dia.d-content i:nth-child(2){display:block;grid-column:1}
#view-ppt .pp-layc-dia.d-two{grid-template-columns:1fr 1fr;grid-template-rows:8px 1fr}
#view-ppt .pp-layc-dia.d-two i:nth-child(1){display:block;grid-column:1/3;background:rgba(47,123,255,.75)}
#view-ppt .pp-layc-dia.d-two i:nth-child(2),
#view-ppt .pp-layc-dia.d-two i:nth-child(3){display:block}
#view-ppt .pp-layc-dia.d-three{grid-template-columns:repeat(3,1fr);grid-template-rows:8px 1fr}
#view-ppt .pp-layc-dia.d-three i:nth-child(1){display:block;grid-column:1/4;background:rgba(47,123,255,.75)}
#view-ppt .pp-layc-dia.d-three i:nth-child(2),
#view-ppt .pp-layc-dia.d-three i:nth-child(3),
#view-ppt .pp-layc-dia.d-three i:nth-child(4){display:block}
#view-ppt .pp-layc-dia.d-four{grid-template-columns:repeat(4,1fr);grid-template-rows:8px 1fr}
#view-ppt .pp-layc-dia.d-four i:nth-child(1){display:block;grid-column:1/5;background:rgba(47,123,255,.75)}
#view-ppt .pp-layc-dia.d-four i{display:block}
/* 面板内控件统一尺寸 */
#view-ppt .pp-insp .ipt,
#view-ppt .pp-insp .sel{height:34px;padding:0 10px;font-size:12.5px;border-radius:10px}
#view-ppt .pp-insp .ta{min-height:72px;padding:10px;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 .pp-wide{width:100%}
#view-ppt .pp-insp .pp-ord{display:flex;gap:8px;flex-wrap:wrap}
#view-ppt .pp-insp .pp-ord .pp-mini{flex:1 1 0;min-width:0}
#view-ppt .pp-insp-note{color:#8296b8;font-size:11px;line-height:1.7}
#view-ppt .pp-insp .pp-fit{padding:9px 11px;border-radius:10px;font-size:11.5px;line-height:1.7}
/* 逐槽位「字体 / 字号 / 颜色」行 */
#view-ppt .pp-insp .pp-styrow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;border-radius:11px;
  border:1px solid rgba(43,89,214,.1);background:rgba(247,251,255,.7);
}
#view-ppt .pp-insp .pp-stylab{flex:0 0 52px;font-size:11.5px;font-weight:700;color:#31527f}
#view-ppt .pp-insp .pp-styctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#view-ppt .pp-insp .pp-iconb{
  min-width:28px;height:26px;border-radius:8px;padding:0 7px;
  border:1px solid rgba(43,89,214,.16);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-insp .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-insp .pp-stysz{font-size:11px;color:#1a49c8;font-weight:700;min-width:36px;text-align:center}
#view-ppt .pp-insp .pp-swc{width:18px;height:18px;border-radius:6px;border:1.5px solid rgba(43,89,214,.16);cursor:pointer}
#view-ppt .pp-insp .pp-swc.on{border-color:#1a49c8;box-shadow:0 0 0 2.5px rgba(47,123,255,.2)}

/* ---------- 7. 中间画布：白底 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 20px 48px rgba(23,58,130,.11);
  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,.85);
  color:#8296b8;font-size:11.5px;line-height:1.6;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
#view-ppt .pp-canvas-foot b{color:#1a49c8}

/* ---------- 8. 窄屏回退 ---------- */
@media (max-width:1280px){
  #view-ppt .pp-work{grid-template-columns:minmax(132px,15%) minmax(0,1fr) minmax(228px,26%)}
}
@media (max-width:1024px){
  #view-ppt .pp-work{grid-template-columns:1fr;gap:14px}
  #view-ppt .pp-film{flex-direction:row;overflow-x:auto;max-height:none}
  #view-ppt .pp-film .pp-thumb{flex:0 0 132px}
  #view-ppt .pp-insp{max-height:none}
}

/* ============ P3：元素层（自由定位的文本 / 图形）+ 编辑交互 ============ */
/* 元素层画在版式之上；缩略图里也一并呈现，所以这里不设 pointer-events:none */
#view-ppt .pp-canvas .pel{
  position:absolute;box-sizing:border-box;
  border-radius:6px;
  transition:box-shadow .16s,outline-color .16s;
}
#view-ppt .pp-canvas .pel-t{
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:2px 4px;cursor:move;
}
#view-ppt .pp-canvas .pel-rect,
#view-ppt .pp-canvas .pel-ellipse{cursor:move}
/* 选中态：蓝色描边 + 光环（只在编辑画布上，缩略图不受影响） */
#view-ppt .pp-film .pel{pointer-events:none}
#view-ppt .pp-canvas .pel.sel{
  outline:2px solid #1a49c8;outline-offset:0;
  box-shadow:0 0 0 4px rgba(47,123,255,.16);
}
#view-ppt .pp-canvas .pel:hover{outline:1.5px dashed rgba(47,123,255,.5)}
/* 右下角缩放手柄 */
#view-ppt .pp-canvas .pel-grip{
  position:absolute;right:-5px;bottom:-5px;width:12px;height:12px;
  border-radius:50%;background:#fff;border:2px solid #1a49c8;
  cursor:nwse-resize;box-shadow:0 2px 6px rgba(31,86,214,.3);
}
/* 属性面板里的「插入元素」按钮组 */
#view-ppt .pp-eladd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#view-ppt .pp-eladd .pp-mini{width:100%;justify-content:center}
/* 选中元素面板：整块加浅蓝底以示"正在编辑该元素" */
#view-ppt .pp-elpanel{
  padding:11px 12px;border-radius:12px;
  border:1px solid rgba(47,123,255,.28);
  background:linear-gradient(180deg,rgba(47,123,255,.06),rgba(47,123,255,.02));
}
#view-ppt .pp-elpanel > label{color:#1a49c8}