/* 分类模板 · 一键制作 */
.tpl-section{margin-top:46px}
.tpl-head-actions{display:flex;align-items:center;gap:18px}
.tpl-cats{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:thin;scrollbar-color:#3a3f45 transparent}
.tpl-cats::-webkit-scrollbar{height:6px}
.tpl-cats::-webkit-scrollbar-thumb{background:#33383d;border-radius:99px}
.tpl-cat{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:7px 15px 7px 7px;border:1px solid #2d3234;border-radius:12px;background:#191b1f;color:#a3a9b2;font-size:12.5px;text-align:left}
.tpl-cat img,.tpl-cat i{width:36px;height:36px;border-radius:9px;object-fit:cover;background:linear-gradient(135deg,#2a3128,#1c1f1e);display:block;flex-shrink:0}
.tpl-cat span{display:flex;flex-direction:column;gap:3px;line-height:1.1}
.tpl-cat strong{font-weight:550;color:#dfe4e8;white-space:nowrap}
.tpl-cat small{font-size:9.5px;color:#7c838c;letter-spacing:.3px;white-space:nowrap}
.tpl-cat:hover{border-color:#4a5347;background:#1f2226}
.tpl-cat.selected{border-color:#7f9a63;background:#252c21;color:#e2f5cd}
.tpl-cat.selected strong{color:var(--lime)}
.tpl-empty{margin:0;padding:16px 2px;color:#6f767e;font-size:12px}
.tpl-body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:16px;align-items:stretch}
.tpl-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:326px;max-height:520px;border:1px solid #2d3234;border-radius:16px;background:#15171a;overflow:hidden}
.tpl-stage img,.tpl-stage video{display:block;width:100%;height:100%;max-height:520px;object-fit:contain;background:#0c0d0e}
.tpl-stage-empty{display:flex;flex-direction:column;align-items:center;gap:12px;color:#5f666e;font-size:12px}
.tpl-stage-empty svg{width:30px;height:30px}
.tpl-stage-empty p{margin:0}
.tpl-badge{position:absolute;left:14px;bottom:14px;padding:5px 9px;border-radius:7px;border:1px solid #ffffff26;background:#061018b0;backdrop-filter:blur(8px);font-size:10px;color:#dbe3d8;letter-spacing:.4px}
.tpl-side{display:flex;flex-direction:column;gap:11px;padding:20px;border:1px solid #2d3234;border-radius:16px;background:linear-gradient(120deg,#1d2023,#1a1c20)}
.tpl-side h3{margin:0;font-size:16px;font-weight:550;color:#eef1f3}
.tpl-side p{margin:0;font-size:11.5px;color:#8a919a;line-height:1.65}
.tpl-meta{display:flex;flex-wrap:wrap;gap:7px}
.tpl-meta span{padding:4px 9px;border-radius:6px;border:1px solid #33383c;background:#20242a;font-size:10px;color:#98a0a9}
.tpl-parameter{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:#8a919a}
.tpl-parameter select{min-width:126px;padding:8px 10px;border-radius:8px;border:1px solid #363a40;background:#20242a;color:#d8dde1;font-size:12px}
.tpl-face{display:flex;flex-direction:column;gap:9px;padding:11px 12px;border:1px solid #33383c;border-radius:11px;background:#1b1e22}
.tpl-face-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#8a919a}
.tpl-face-head small{font-size:10px;color:#6f767e}
.tpl-face-head small.active{color:var(--lime)}
.tpl-face-row{display:flex;align-items:center;gap:9px}
.tpl-face-slot{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;height:52px;padding:0 12px;border:1px dashed #4a5347;border-radius:9px;background:#191c1f;color:#a6b09f;font-size:11.5px;overflow:hidden}
.tpl-face-slot svg{width:18px;height:18px}
.tpl-face-slot b{font-weight:500}
.tpl-face-slot img{width:44px;height:44px;border-radius:7px;object-fit:cover;display:block}
.tpl-face-slot:hover:not(:disabled){border-color:#7f9a63;color:#d5e6c4;background:#1f2420}
.tpl-face-slot.filled{border-style:solid;border-color:#5f7350;justify-content:flex-start;gap:11px;color:#cfe2bb}
.tpl-face-slot.busy{cursor:progress;opacity:.7}
.tpl-face-clear{flex:0 0 auto;height:52px;padding:0 13px;border:1px solid #3c4147;border-radius:9px;background:#20242a;color:#9aa2ab;font-size:11.5px}
.tpl-face-clear:hover{background:#282d33;color:#dfe5e9}
.tpl-face-note{margin:0;font-size:10px;line-height:1.6;color:#6b727a}
.tpl-face-library{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tpl-face-library>span{font-size:10px;color:#6f767e}
.tpl-face-mini{width:34px;height:34px;padding:0;border:1px solid #3a4046;border-radius:7px;overflow:hidden;background:#15171a}
.tpl-face-mini img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.9)}
.tpl-face-mini:hover{border-color:#7f9a63}
.tpl-face-mini:hover img{filter:brightness(1.05)}
.tpl-prompt-label{font-size:11px;color:#8a919a}
.tpl-prompt{box-sizing:border-box;width:100%;min-height:116px;margin:0;padding:10px 12px;border-radius:9px;border:1px solid #333a3a;background:#161819;font:inherit;font-size:12px;line-height:1.7;color:#d8dde1;resize:vertical}
.tpl-prompt:focus{outline:none;border-color:#7f9a63}
.tpl-prompt::placeholder{color:#6b727a}
.tpl-side .generate-button{width:100%;height:42px;justify-content:space-between;margin-top:auto}
.tpl-side .generate-button.muted{background:#3a4238;color:#c7d3bf}
.tpl-side .outline-button{width:100%;justify-content:center}
.tpl-note{font-size:10px;color:#6b727a;line-height:1.7}
.tpl-strip{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 4px;scrollbar-width:thin}
.tpl-strip::-webkit-scrollbar{height:6px}
.tpl-strip::-webkit-scrollbar-thumb{background:#33383d;border-radius:99px}
.tpl-thumb{position:relative;flex:0 0 auto;width:88px;height:112px;padding:0;border:1px solid #2d3234;border-radius:10px;overflow:hidden;background:#15171a}
.tpl-thumb img,.tpl-thumb video{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.82);transition:transform .5s,filter .4s}
.tpl-thumb b{position:absolute;right:6px;bottom:5px;font-size:9px;color:#e7efe1;background:#061018a8;border-radius:4px;padding:1px 4px;font-weight:400}
.tpl-thumb:hover img,.tpl-thumb:hover video{transform:scale(1.05);filter:brightness(1)}
.tpl-thumb.selected{border-color:var(--lime);box-shadow:0 0 0 1px #c7f7865c inset}
@media (max-width:1080px){
  .tpl-body{grid-template-columns:1fr}
  .tpl-stage{min-height:260px}
  .tpl-side{padding:16px}
  .tpl-thumb{width:76px;height:98px}
}
@media (max-width:720px){
  .tpl-section{margin-top:32px}
  .tpl-cat small{display:none}
  .tpl-stage{min-height:210px}
  .tpl-thumb{width:64px;height:84px}
  .tpl-side .generate-button{height:38px}
}