/* 创作面板（票根 / 照片日历 / insta 相框 / 光感水印 / 破框主体）样式
 *
 * 这些面板和每日金句同构：左编辑列 + 右实时预览（.pf-layout = .dq-layout）。
 * 内部大量复用 .dq-* 控件，这里只补各面板特有的部分：
 *   .pf-styles / .pf-chip    样式卡（竖版票根 5 选 1 之类）
 *   .pf-dots / .pf-dot       票根颜色圆点 + 「高级」自定色
 *   .pf-dark                 光感水印的深色编辑列
 * 移动端断点与 poster-art.css 里 .dq-layout 的 820px 对齐。
 */

.pf-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
  /* 与 .pe-modal-wide 配套：预览列和编辑列一样宽 */
  width:min(1040px,94vw);
}
.pf-layout .dq-panel{max-width:none}

/* ── 样式卡：名称 + 比例两行，选中态绿底 ── */
.pf-styles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px;margin-top:9px;
}
.pf-chip.pf-style-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:52px;padding:7px 6px;border-radius:11px;
  border:1px solid #d9e7dd;background:#fff;cursor:pointer;
  text-align:center;transition:border-color .15s,background .15s;
}
.pf-style-chip b{font-size:13px;font-weight:700;color:#1a4d2e}
.pf-style-chip small{font-size:11px;color:#8a968e;font-weight:600;letter-spacing:.02em}
.pf-style-chip:hover{background:#f2faf5}
.pf-style-chip.on{background:#1a4d2e;border-color:#1a4d2e}
.pf-style-chip.on b{color:#fff}
.pf-style-chip.on small{color:#bfe3cd}

/* ── 色点选择器：8 个圆点 + 自定义色 ── */
.pf-dots{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 2px}
.pf-dot{
  width:28px;height:28px;border-radius:50%;padding:0;
  border:2px solid #fff;outline:1px solid #d5dfd8;
  cursor:pointer;position:relative;flex:0 0 auto;
  transition:transform .12s;
}
.pf-dot:hover{transform:scale(1.12)}
.pf-dot.on{outline:2px solid #1a4d2e;outline-offset:2px}
/* 「＋」自定色：透明 color input 盖满整粒圆点，点哪都能调 */
.pf-dot-custom{
  display:flex;align-items:center;justify-content:center;
  background:#f2f5f3;color:#6b7d72;font-size:14px;font-weight:800;line-height:1;
  overflow:hidden;
}
.pf-dot-custom input[type="color"]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;padding:0;
}

/* ── 预览列微调（主体样式走 .dq-preview） ── */
.pf-preview .pf-pv-full{width:100%;min-height:36px}

/* ── 深色编辑列：光感水印专用 ── */
.pf-dark{
  background:#12181e;border-radius:12px;padding:4px 14px 14px;
  color:#dfe7ea;
}
.pf-dark .dq-sec{border-bottom-color:#212b34}
.pf-dark .dq-sec-h{color:#9fd4ae}
.pf-dark .dq-sec-h::before{background:#3f8f63}
.pf-dark .dq-lab{color:#8b98a0}
.pf-dark .dq-tip{background:#18222b;border-color:#26323d;color:#a8b8b0}
.pf-dark .dq-check{color:#dfe7ea}
.pf-dark .pe-input{
  background:#0e141a;border-color:#2a3540;color:#e6edf0;
}
.pf-dark .pe-input::placeholder{color:#5d6b75}
.pf-dark input[type="range"].pe-input{background:transparent;border:0;padding:0;accent-color:#3f8f63}
.pf-dark .dq-chip{background:#1b232c;border-color:#2a3540;color:#dfe7ea}
.pf-dark .dq-chip:hover{background:#232e39}
.pf-dark .dq-chip.on{background:#2d7a4e;border-color:#2d7a4e;color:#fff}
.pf-dark .pe-btn{background:#1b232c;border-color:#2a3540;color:#dfe7ea}
.pf-dark .pe-btn:hover{background:#232e39}
.pf-dark .pe-btn-primary{background:linear-gradient(135deg,#1a4d2e,#2d7a4e);border-color:#1a4d2e;color:#fff}

/* ── 窄屏：单列，预览置顶全宽（与 .dq-layout 820px 断点一致） ── */
@media (max-width:820px){
  .pf-layout{grid-template-columns:minmax(0,1fr);width:100%}
  .pf-preview{order:0}
  /* 触控目标：样式卡、圆点、chips 全部加大 */
  .pf-styles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
  .pf-style-chip{min-height:58px}
  .pf-dot{width:34px;height:34px}
  .pf-dots{gap:12px}
  .pf-dark{padding:4px 12px 12px}
  .pf-dark .pe-input{min-height:42px}
}

/* ── 超窄屏（≤600px）：面板全宽、控件触控热区 ≥44px、预览高度自适应 ── */
@media (max-width:600px){
  .pf-layout{gap:12px;width:100%}
  .pf-layout .dq-panel{padding:10px}
  /* 预览区：宽度铺满，高度按视口自适应，避免撑破弹层 */
  .pf-preview{order:0;width:100%}
  .pf-preview .dq-preview,
  .pf-preview .pf-pv-full{width:100%}
  .pf-preview canvas,
  .pf-preview img{max-width:100%;height:auto}
  /* 样式卡：两列起步，加大点按区域 */
  .pf-styles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pf-style-chip{min-height:56px;padding:8px 6px}
  /* 色点：加大到接近 44px 触控热区 */
  .pf-dot{width:38px;height:38px}
  .pf-dots{gap:14px}
  /* 通用控件触控热区 ≥44px（滑杆/输入/按钮/芯片） */
  .pf-layout .pe-input,
  .pf-layout .pe-btn,
  .pf-layout .dq-chip{min-height:44px}
  .pf-layout input[type="range"].pe-input{min-height:44px;padding:12px 0}
  .pf-layout .dq-check{min-height:44px;display:flex;align-items:center}
  .pf-dark{padding:4px 10px 10px}
  /* PPT 缩略图加大，便于点选 */
  .pf-ppt-thumb{width:96px;height:72px}
  .pf-ppt-line{padding:10px}
}

/* ── PPT 素材面板：文本行 / 缩略图 ── */
.pf-ppt-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;margin:6px 0}
.pf-ppt-line{
  display:flex;align-items:center;gap:8px;justify-content:space-between;
  background:#f4f7f4;border-radius:8px;padding:6px 10px;
}
.pf-ppt-line span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;color:#2c3a31;
}
.pf-ppt-media{display:flex;flex-wrap:wrap;gap:8px}
.pf-ppt-thumb{
  width:86px;height:64px;padding:0;border:1px solid #d5dfd8;border-radius:8px;
  overflow:hidden;background:#fff;cursor:pointer;
}
.pf-ppt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pf-ppt-thumb:hover{outline:2px solid #1f6f5c}