/* ============================================================
 * PPT 在线设计工具 —— 统一渲染架构样式（2026-09-23 重构 v2）
 * ------------------------------------------------------------
 * 架构（与 js 配合）：
 *   slideData ──► PPTX.slideScaled(data, w) ──► 主画布(65%) / 缩略图(15%) / 导出 PPTX
 *   同一个渲染器 + 只差缩放比 → 三者永远一致，不会出现缩略图文字重叠。
 * 布局：顶部工具栏 ｜ 左缩略图 15% ｜ 中画布 65% ｜ 右属性 20%
 * 全部规则限定 #view-ppt。
 * ========================================================== */

/* ---------- 1. 三栏：15% / 65% / 20% ---------- */
#view-ppt .pp-work{
  display:grid;
  grid-template-columns:15% minmax(0,65%) 20%;
  gap:12px;
  align-items:stretch;
  min-height:0;
}
/* 画布是主角：右栏给足但不抢空间，左栏窄而只放缩略图 */
#view-ppt .pp-rail{min-width:150px}
#view-ppt .pp-insp{min-width:250px}

/* ---------- 2. 顶部工具栏（固定、圆角卡片、两行不堆叠） ---------- */
#view-ppt .pp-tools{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;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));
  box-shadow:0 1px 2px rgba(23,58,130,.04), 0 8px 22px rgba(23,58,130,.06);
  margin-bottom:10px;
}
#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}
#view-ppt .pp-tools-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
#view-ppt .pp-tools .btn-ghost,
#view-ppt .pp-tools .btn-main{
  height:31px;padding:0 11px;border-radius:10px;font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:border-color .16s,box-shadow .16s,color .16s,background .16s,transform .16s;
}
#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 14px 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 14px rgba(31,86,214,.26)}
#view-ppt .pp-tools .btn-main:hover{filter:brightness(1.06);transform:translateY(-1px)}
#view-ppt .pp-tsep2{width:1px;height:18px;background:rgba(43,89,214,.14);margin:0 2px}
#view-ppt .pp-tlab{color:#8296b8;font-size:11.5px}
#view-ppt .pp-tools .pp-sws{gap:5px}
#view-ppt .pp-tools .pp-swd{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(43,89,214,.18);cursor:pointer;padding:0}
#view-ppt .pp-tools .pp-swd.on{border-color:#1a49c8;box-shadow:0 0 0 2.5px rgba(47,123,255,.2)}

/* ---------- 3. 左侧：只放缩略图，页码在缩略图下面 ---------- */
#view-ppt .pp-rail{
  display:flex;flex-direction:column;min-height:0;padding:9px;
  border-radius:13px;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 8px 20px rgba(23,58,130,.05);
}
#view-ppt .pp-rail-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2px 8px;margin-bottom:8px;border-bottom:1px solid rgba(43,89,214,.1);
  font-size:11px;font-weight:700;color:#8296b8;letter-spacing:.4px;
}
#view-ppt .pp-rail-add{
  width:24px;height:24px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(43,89,214,.18);background:#fff;color:#1a49c8;
  font-size:14px;line-height:1;display:grid;place-items:center;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
#view-ppt .pp-rail-add:hover{border-color:rgba(47,123,255,.5);background:#f7fbff;box-shadow:0 5px 14px rgba(31,86,214,.16)}
#view-ppt .pp-film{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:1px}
#view-ppt .pp-thumb{
  position:relative;display:block;padding:0;border-radius:10px;cursor:pointer;
  border:2px solid transparent;background:#fff;
  box-shadow:0 1px 3px rgba(23,58,130,.1);
  transition:border-color .16s,box-shadow .16s,transform .16s,opacity .16s;
  /* 覆盖 css/style.css 里第一代 PPT 的遗留尺寸（.pp-thumb{width:132px;height:74.25px;overflow:hidden}） */
  width:100%;height:auto;overflow:visible;
}
#view-ppt .pp-thumb:hover{border-color:rgba(47,123,255,.45);box-shadow:0 6px 16px rgba(31,86,214,.14)}
#view-ppt .pp-thumb.on{border-color:#1a49c8;box-shadow:0 0 0 3px rgba(47,123,255,.18), 0 8px 20px rgba(31,86,214,.14)}
#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)}
/* 缩略图画布：宽度撑满左栏，高度按 16:9；内部由统一渲染器按该宽度缩放 */
#view-ppt .pp-thumb-in{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  overflow:hidden;border-radius:7px;background:#fff;
  /* 关键：覆盖 css/style.css 遗留的 height:540px 与 transform:scale(.1375)
     —— 否则 aspect-ratio 失效、整个缩略图被缩成一条细缝 */
  height:auto;transform:none;
}
#view-ppt .pp-thumb-in .psc{width:100%!important;height:100%!important}
/* 关键修正：统一渲染器内层是 960×540 的固定画布，这里按「实际宽度/960」缩放 */
#view-ppt .pp-thumb-in .psc-in{transform-origin:0 0}
#view-ppt .pp-thumb-lb{
  display:block;padding:4px 2px 1px;text-align:center;
  font-size:10.5px;font-weight:600;color:#8296b8;
}
#view-ppt .pp-thumb.on .pp-thumb-lb{color:#1a49c8}

/* ---------- 4. 中间：灰色工作区 + 居中画布（尽量占满高度） ---------- */
#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:16px;border-radius:13px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.92), rgba(236,241,249,.92)),
    repeating-linear-gradient(45deg, rgba(43,89,214,.026) 0 10px, transparent 10px 20px);
  border:1px solid rgba(43,89,214,.1);
  box-shadow:inset 0 1px 3px rgba(23,58,130,.05);
  overflow:hidden;
}
/* 画布尺寸完全由 JS 按可用空间算出（保持 16:9），CSS 不再参与宽高计算 */
#view-ppt .pp-canvas-in{
  position:relative;flex:0 0 auto;
  border-radius:10px;overflow:hidden;background:#fff;
  border:1px solid rgba(43,89,214,.14);
  box-shadow:0 2px 8px rgba(23,58,130,.08), 0 22px 50px rgba(23,58,130,.13);
  margin:0 auto;
}
#view-ppt .pp-canvas-in .psc-in{transform-origin:0 0}
#view-ppt .pp-canvas-foot{
  flex:0 0 auto;margin-top:9px;padding:7px 12px;border-radius:10px;
  border:1px solid rgba(43,89,214,.1);background:rgba(247,251,255,.85);
  color:#8296b8;font-size:11.5px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
#view-ppt .pp-pageidx{color:#5a6f95;white-space:nowrap}
#view-ppt .pp-pageidx b{color:#1a49c8;font-weight:700}

/* ---------- 5. 右侧：卡片式属性（不堆说明文字） ---------- */
#view-ppt .pp-insp{
  border-radius:13px;padding:13px 14px;gap:12px;
  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 8px 22px rgba(23,58,130,.05);
  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:11.5px;color:#8296b8;padding-bottom:9px;
  border-bottom:1px solid rgba(43,89,214,.1);
}
#view-ppt .pp-insp-h b{font-size:14px;color:#0b2a66;font-weight:700}
#view-ppt .pp-igrp{margin-bottom:1px}
#view-ppt .pp-igrp > label{font-size:10.5px;font-weight:700;color:#8296b8;letter-spacing:.5px}
#view-ppt .pp-insp .pp-styrow{padding:7px 9px;border-radius:10px}
#view-ppt .pp-insp .pp-stylab{flex:0 0 46px;font-size:11px}
#view-ppt .pp-insp .pp-iconb{min-width:26px;height:25px;border-radius:8px;font-size:11px}
#view-ppt .pp-insp .pp-stysz{font-size:10.5px;min-width:32px}
#view-ppt .pp-insp .ipt,
#view-ppt .pp-insp .sel{height:32px;padding:0 9px;font-size:12px;border-radius:9px}
#view-ppt .pp-insp .btn-ghost,
#view-ppt .pp-insp .btn-main,
#view-ppt .pp-insp .pp-mini{height:31px;padding:0 11px;border-radius:9px;font-size:11.5px}
#view-ppt .pp-eladd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}

/* ---------- 6. 窄屏回退 ---------- */
@media (max-width:1200px){
  #view-ppt .pp-work{grid-template-columns:15% minmax(0,1fr) 22%}
}
@media (max-width:1024px){
  #view-ppt .pp-work{grid-template-columns:1fr;gap:12px}
  #view-ppt .pp-rail{max-height:190px}
  #view-ppt .pp-film{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  #view-ppt .pp-film .pp-thumb{flex:0 0 150px}
}