/* ============================================================
 * 模板库 Modal —— 独立弹窗组件（重构，2026-09-23 v2）
 * ------------------------------------------------------------
 * 结构（三段式，模板库自身是一个独立组件，不影响编辑页）：
 *   .pp-modal-box (固定高)
 *     ├─ .pp-modal-body            flex column
 *     │    ├─ .pp-tm-hd            fixed  (80px) 标题 + 分类 + 搜索 + ×
 *     │    ├─ .pp-tm-scroll        flex:1 overflow-y:auto   仅此区域滚动
 *     │    │    └─ .pp-tm-grid     grid 5 列 / auto-fit
 *     │    └─ .pp-tm-foot          fixed (70px) 分页
 * 要点：弹窗高度固定、列表独立滚动、分页永远贴在底部、图片严格 16:9 不拉伸。
 * 全部规则限定 #view-ppt。
 * ========================================================== */

/* ---------- 1. 弹窗尺寸：固定高，整页不滚动 ---------- */
#view-ppt .pp-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
#view-ppt .pp-modal[hidden]{display:none}
#view-ppt .pp-modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
#view-ppt .pp-modal-box{
  position:relative;z-index:1;
  width:90vw;max-width:1400px;
  height:85vh;max-height:900px;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(43,89,214,.16);
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 30px 80px rgba(9,24,56,.38), 0 4px 14px rgba(9,24,56,.16);
}
#view-ppt .pp-modal-body{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:0;gap:0;overflow:hidden;
}

/* ---------- 2. 顶部固定区（80px）：标题 + 分类 + 搜索 + 关闭 ---------- */
#view-ppt .pp-tm-hd{
  flex:0 0 auto;min-height:80px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;
  border-bottom:1px solid rgba(43,89,214,.1);
  background:linear-gradient(180deg,#fff,rgba(248,251,255,.9));
}
#view-ppt .pp-tm-ttl{font-size:16px;font-weight:700;color:#0b2a66;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#view-ppt .pp-tm-ttl span{font-size:11.5px;font-weight:400;color:#8296b8}
/* 分类 chips 居中 */
#view-ppt .pp-tm-hd .pp-tm-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 auto}
/* 搜索 + 关闭靠右 */
#view-ppt .pp-tm-hd .pp-tm-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
#view-ppt .pp-tm-search{width:220px;height:34px;padding:0 12px;border-radius:10px;font-size:12.5px}
#view-ppt .pp-tm-x{
  width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:15px;line-height:1;
  border:1px solid rgba(43,89,214,.18);background:#fff;color:#5a6f95;
  transition:border-color .16s,color .16s,background .16s,box-shadow .16s;
}
#view-ppt .pp-tm-x:hover{border-color:rgba(214,69,69,.45);color:#d64545;background:#fff7f6;box-shadow:0 5px 14px rgba(214,69,69,.14)}
/* 独立成行时的 chips（老结构兼容） */
#view-ppt .pp-tm-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#view-ppt .pp-tm-chip{
  height:28px;padding:0 12px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(43,89,214,.16);background:#fff;color:#31527f;
  font-family:inherit;font-size:12px;font-weight:600;white-space:nowrap;
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s;
}
#view-ppt .pp-tm-chip:hover{border-color:rgba(47,123,255,.45);color:#1a49c8;background:#f7fbff}
#view-ppt .pp-tm-chip.on{border-color:transparent;color:#fff;background:linear-gradient(135deg,#2f7bff,#1a49c8);box-shadow:0 6px 14px rgba(31,86,214,.24)}

/* ---------- 3. 模板展示区：独立滚动（只有这里滚） ---------- */
#view-ppt .pp-tm-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:16px 18px;
  overscroll-behavior:contain;
}
#view-ppt .pp-tm-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  align-content:start;
}
@media (max-width:1280px){ #view-ppt .pp-tm-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1040px){ #view-ppt .pp-tm-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ #view-ppt .pp-tm-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }

/* ---------- 4. 卡片：高度稳定，封面严格 16:9 不拉伸 ---------- */
#view-ppt .pp-tm-card{
  display:flex;flex-direction:column;
  overflow:hidden;border-radius:12px;
  border:1px solid rgba(43,89,214,.13);background:#fff;
  box-shadow:0 1px 3px rgba(23,58,130,.06);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
#view-ppt .pp-tm-card:hover{
  transform:translateY(-3px);
  border-color:rgba(47,123,255,.42);
  box-shadow:0 16px 34px rgba(31,86,214,.2);
}
#view-ppt .pp-tm-card:active{transform:translateY(-1px)}
/* 封面：比例容器 + 图片铺满（只用 object-fit，绝不拉伸） */
#view-ppt .pp-tm-cov{
  position:relative;width:100%;
  aspect-ratio:16/9;
  min-height:0;overflow:hidden;background:#eef3fa;
  flex:0 0 auto;
}
#view-ppt .pp-tm-cov img{
  position:absolute;left:0;top:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
}
#view-ppt .pp-tm-ph{
  position:absolute;left:0;top:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:700;
}
/* hover 时浮现「立即使用」 */
#view-ppt .pp-tm-use{
  position:absolute;left:0;right:0;bottom:0;
  padding:6px 0;text-align:center;
  font-size:11.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,rgba(26,73,200,0),rgba(26,73,200,.86));
  opacity:0;transform:translateY(6px);
  transition:opacity .18s,transform .18s;
  pointer-events:none;
}
#view-ppt .pp-tm-card:hover .pp-tm-use{opacity:1;transform:translateY(0)}
#view-ppt .pp-tm-pages{
  position:absolute;right:7px;top:7px;padding:2px 7px;border-radius:7px;
  font-style:normal;font-size:10.5px;font-weight:700;color:#1a49c8;
  background:rgba(255,255,255,.94);border:1px solid rgba(43,89,214,.2);
}
#view-ppt .pp-tm-real{
  position:absolute;left:7px;bottom:7px;padding:2px 7px;border-radius:7px;
  font-style:normal;font-size:10px;font-weight:600;color:#0b6b45;
  background:rgba(232,250,241,.94);border:1px solid rgba(18,168,106,.3);
}
/* 信息 + 按钮：固定两行，卡片总高稳定 */
#view-ppt .pp-tm-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 0}
#view-ppt .pp-tm-meta b{font-size:12px;font-weight:600;color:#0e2a5e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-ppt .pp-tm-meta span{flex:0 0 auto;font-size:10.5px;color:#8296b8;white-space:nowrap}
#view-ppt .pp-tm-acts{display:grid;grid-template-columns:1fr auto;gap:7px;padding:8px 10px 10px}
#view-ppt .pp-tm-acts .pp-mini{height:30px;border-radius:8px;font-size:11.5px;justify-content:center}
#view-ppt .pp-tm-acts .btn-main{min-width:0}
#view-ppt .pp-tm-acts .btn-ghost{white-space:nowrap}
#view-ppt .pp-tm-empty{grid-column:1/-1;padding:48px;text-align:center;color:#8296b8;font-size:13px}

/* ---------- 5. 底部分页：固定 70px，永远贴底、不被内容覆盖 ---------- */
#view-ppt .pp-tm-foot{
  flex:0 0 auto;height:70px;
  display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
  padding:0 18px;
  border-top:1px solid rgba(43,89,214,.1);
  background:linear-gradient(180deg,rgba(248,251,255,.7),#fff);
  box-shadow:0 -6px 16px rgba(23,58,130,.04);
}
#view-ppt .pp-tm-pg{
  min-width:32px;height:32px;padding:0 10px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(43,89,214,.16);background:#fff;color:#31527f;
  font-family:inherit;font-size:12.5px;font-weight:600;
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s,transform .16s;
}
#view-ppt .pp-tm-pg:hover:not(:disabled){border-color:rgba(47,123,255,.45);color:#1a49c8;background:#f7fbff;transform:translateY(-1px)}
#view-ppt .pp-tm-pg.on{border-color:transparent;color:#fff;background:linear-gradient(135deg,#2f7bff,#1a49c8);box-shadow:0 6px 14px rgba(31,86,214,.26)}
#view-ppt .pp-tm-pg:disabled{opacity:.42;cursor:not-allowed}
#view-ppt .pp-tm-count{margin-left:8px;font-size:11.5px;color:#8296b8;white-space:nowrap}

/* ---------- 6. 确认面板 / 配色网格（复用时保持一致） ---------- */
#view-ppt .pp-cf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;flex:1 1 auto;min-height:0;overflow:auto;padding:16px 18px}
#view-ppt .pp-cf-prev{border-radius:12px;overflow:hidden;border:1px solid rgba(43,89,214,.14);background:#eef3fa;aspect-ratio:16/9}
#view-ppt .pp-cf-prev img{width:100%;height:100%;object-fit:cover;display:block}
#view-ppt .pp-cf-info b{display:block;font-size:15px;color:#0b2a66;margin-bottom:10px}
#view-ppt .pp-cf-info ul{margin:0 0 14px;padding-left:18px;color:#31527f;font-size:12.5px;line-height:2}
#view-ppt .pp-cf-info strong{color:#1a49c8}
#view-ppt .pp-cf-acts{display:flex;gap:10px}
#view-ppt .pp-cf-acts .pp-mini{height:34px;padding:0 16px;border-radius:10px}
#view-ppt .pp-th-grid{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 18px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;
}
#view-ppt .pp-th-card{
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px;cursor:pointer;
  border-radius:13px;border:1.5px solid rgba(43,89,214,.15);background:#fff;font-family:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
#view-ppt .pp-th-card:hover{border-color:rgba(47,123,255,.45);box-shadow:0 12px 26px rgba(31,86,214,.16);transform:translateY(-3px)}
#view-ppt .pp-th-card.on{border-color:#1a49c8;box-shadow:0 0 0 3px rgba(47,123,255,.16)}
#view-ppt .pp-th-sw{width:100%;height:46px;border-radius:10px;border:1px solid rgba(43,89,214,.14)}
#view-ppt .pp-th-card b{font-size:12px;font-weight:600;color:#31527f}
#view-ppt .pp-th-card.on b{color:#1a49c8}

/* ---------- 7. 窄屏 ---------- */
@media (max-width:900px){
  #view-ppt .pp-modal-box{width:96vw;height:92vh;border-radius:16px}
  #view-ppt .pp-tm-hd{min-height:auto;padding:10px 14px}
  #view-ppt .pp-tm-search{width:150px}
  #view-ppt .pp-tm-foot{height:auto;padding:10px 14px}
  #view-ppt .pp-cf{grid-template-columns:1fr;padding:14px}
}