/* 海报设计器 · 新增控件与「双击替换」弹层
 *
 * 面板控件复用 .pe-input / .pe-btn（那两个现在默认就是浅色，
 * 在白底弹窗里直接可用），这里只补新出现的结构。
 */

/* ── 双击替换弹层 ─────────────────────────────────── */
.pqr{font-size:13px;color:#243027}
.pqr-hint{
  margin:0 0 12px;padding:9px 11px;border-radius:9px;
  background:#f2f9f5;border:1px solid #dbeade;
  font-size:12.5px;line-height:1.7;color:#3c5a49;
}
.pqr-sec{padding:11px 0;border-bottom:1px solid #eef4f0}
.pqr-sec:last-of-type{border-bottom:0}
.pqr-h{
  font-size:12.5px;font-weight:800;color:#1a4d2e;margin-bottom:7px;
  display:flex;align-items:center;gap:6px;
}
.pqr-h::before{content:'';width:3px;height:12px;border-radius:2px;background:#2d7a4e}
.pqr-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pqr-row .pe-input{flex:1;min-width:0}
.pqr-row-3{gap:10px}
.pqr-row-3 label{
  flex:1;min-width:90px;display:flex;flex-direction:column;gap:4px;
  font-size:12px;color:#6b7d72;
}
.pqr-row-3 label .pe-input{width:100%}
.pqr-file{width:100%;padding:9px 10px}
.pqr-note{
  margin:7px 0 0;font-size:11.5px;line-height:1.65;color:#8a7a4e;
  background:#fbfaf3;border:1px solid #ece5cb;border-radius:8px;padding:8px 10px;
}
.pqr-ta{width:100%;resize:vertical;line-height:1.7;font-family:inherit}
.pqr-foot{display:flex;gap:8px;justify-content:flex-end;padding-top:12px}
.pqr-err{margin:10px 0 0;min-height:18px;font-size:12.5px;color:#b3382a}

/* ── 面板里的分组下拉 ─────────────────────────────── */
.dq-panel optgroup{font-weight:700;color:#1a4d2e}
.dq-panel option{color:#1a2e22;background:#fff}

/* 忙碌遮罩要盖住整个面板，包括新增的几节 */
.dq-busy{border-radius:10px}

@media (max-width:560px){
  .pqr-row .pe-input,.pqr-row .pe-btn{flex:1 1 100%;min-height:44px}
  .pqr-row-3 label{flex:1 1 100%}
  .pqr-foot .pe-btn{flex:1 1 100%;min-height:46px}
}

/* ── 面板两栏：左控件 / 右实时预览 ───────────────────
 *
 * 面板是居中弹层，正好盖住画布。改一个形状要先关面板看效果、
 * 不满意再打开重调 —— 而这工具的用法本来就是连着试十几次。
 * 右边挂一块预览，改什么当场看见。
 *
 * 两栏**等宽**（用户反馈：预览要和左侧编辑界面一样大，
 * 方便边看边改）。预览列贴顶吸附，滚动时不丢画面。
 */
.dq-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
  /* 两栏等宽后需要更宽的弹层（.pe-modal-wide 配套） */
  width:min(1040px,94vw);
}
.dq-layout .dq-panel{max-width:none}

.dq-preview{
  position:sticky; top:0;
  order:2;                       /* 视觉在右，DOM 在前 —— 窄屏时它要排到最上面 */
  display:flex;flex-direction:column;gap:8px;
  padding:12px;border-radius:12px;
  background:#f5f9f6;border:1px solid #dceae2;
  align-self:start;
  max-height:calc(86vh - 40px);overflow:auto;
}
.dq-pv-head{font-size:12.5px;font-weight:800;color:#1a4d2e}
.dq-pv-box{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:260px;padding:8px;border-radius:9px;
  background:
    linear-gradient(45deg,#eceff0 25%,transparent 25%,transparent 75%,#eceff0 75%),
    linear-gradient(45deg,#eceff0 25%,#fff 25%,#fff 75%,#eceff0 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;
  border:1px solid #e2eae5;
}
.dq-pv-box img{
  max-width:100%;max-height:64vh;display:block;
  border-radius:4px;box-shadow:0 6px 20px rgba(15,40,25,.16);
  transition:opacity .18s;
}
.dq-pv-note{margin:0;font-size:11.5px;line-height:1.6;color:#7c8c82}
.dq-pv-err{margin:6px 0 0;font-size:11.5px;line-height:1.6;color:#b3382a}
.dq-pv-acts{display:flex;gap:6px}
.dq-pv-acts .pe-btn{flex:1;font-size:12px;padding:6px 8px}

/* ── 自定义文字框与上方按钮行同宽 ───────────────────
 * 原来 textarea 只有 ~90px 宽（继承了 .pe-input 的固定宽度），
 * 缩在左边一小块，和上面那排按钮完全对不齐。 */
.dq-panel .dq-ta,
.dq-panel textarea.pe-input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  min-height:64px;
}
/* 面板里所有 input/select 都撑满所在行 —— .pe-input 自带 width:120px */
.dq-panel .dq-row > .pe-input{flex:1 1 auto;width:auto;min-width:0}
.dq-panel .dq-row > select.pe-input{max-width:100%}
.dq-panel input[type="file"].pe-input{width:100%}

@media (max-width:820px){
  .dq-layout{grid-template-columns:minmax(0,1fr);width:100%}
  /* 窄屏预览置顶全宽：先看效果，再往下调参数。
     108px 缩略图在手机上根本看不清改了什么，放到全宽。 */
  .dq-preview{order:0;position:sticky;top:0;z-index:5;max-height:none;overflow:visible}
  .dq-pv-box{min-height:0;padding:6px}
  .dq-pv-box img{max-height:34vh;max-height:34dvh}
  .dq-pv-head{display:none}
  .dq-pv-note{display:none}
  .dq-pv-acts{flex:0 0 auto}
  .dq-pv-acts .pe-btn{min-height:38px}
}

/* ── 超窄屏（≤600px）：面板全宽、控件触控热区 ≥44px、预览高度自适应 ── */
@media (max-width:600px){
  .dq-layout{gap:12px;width:100%}
  .dq-layout .dq-panel{padding:10px}
  /* 预览图高度自适应，竖向空间更省 */
  .dq-pv-box img{max-height:30vh;max-height:30dvh}
  /* 面板控件触控热区 ≥44px（滑杆/输入/按钮/芯片/勾选） */
  .dq-panel .pe-input,
  .dq-panel .pe-btn,
  .dq-panel .dq-chip{min-height:44px}
  .dq-panel input[type="range"].pe-input{min-height:44px;padding:12px 0}
  .dq-panel .dq-check{min-height:44px;display:flex;align-items:center}
  .dq-pv-acts .pe-btn{min-height:44px;font-size:13px}
  /* 模板 / 模块卡：加大点按区域 */
  .pe-tpl-card,.pe-mod-btn{min-height:58px}
  /* 双击替换弹层控件热区 */
  .pqr-row .pe-input,.pqr-row .pe-btn{min-height:44px}
}

/* ── 侧栏面板：整齐与间距（图三 / 图四）─────────────
 *
 * 素材面板里按钮有 44px 和 34px 两种高度混排，看着参差；
 * 模板卡和模块卡是纯 div，鼠标能点、键盘完全够不着。
 */

/* 素材面板：所有可点项统一高度与间距 */
.pe-panel .pe-asset-btn{
  min-height:44px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
  text-align:center;line-height:1.35;
}
.pe-panel .pe-asset-btn:last-child{margin-bottom:0}

/* 模板 / 模块卡片：给出可点的样子，并且键盘能用 */
.pe-tpl-grid,
.pe-mod-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.pe-tpl-card,
.pe-mod-btn{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-height:56px;
  padding:10px 11px;
  border:1px solid #dbe8df;border-radius:11px;background:#fff;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pe-tpl-card:hover,.pe-mod-btn:hover,
.pe-tpl-card:focus-visible,.pe-mod-btn:focus-visible{
  border-color:#2d7a4e;
  box-shadow:0 4px 14px rgba(26,77,46,.14);
  transform:translateY(-1px);
  outline:none;
}
.pe-tpl-card:focus-visible,.pe-mod-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(45,122,78,.22);
}
.pe-tpl-card b,.pe-mod-btn b{
  font-size:12.5px;font-weight:800;color:#123f26;line-height:1.35;
}
.pe-tpl-card .cat,.pe-mod-btn span,
.pe-tpl-card small,.pe-mod-btn small{
  font-size:11px;color:#7c8c82;line-height:1.4;
}

/* 面板整体呼吸感：分节标题与说明文字 */
.pe-panel > p:first-child{
  margin:0 0 10px !important;
  padding:8px 10px;border-radius:8px;
  background:#f5f9f6;border:1px solid #e4eee8;
  font-size:11.5px !important;line-height:1.65;color:#5c6f63 !important;
}

@media (max-width:900px){
  .pe-tpl-grid,.pe-mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pe-tpl-card,.pe-mod-btn{min-height:60px}
}