/* Covers retain their real aspect ratio at every card width. */
#templates .template-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;padding:0;border:0;background:#f3f4f8;cursor:pointer;text-align:left}
#templates .template-cover>svg,#templatePreviewStage>svg{display:block;width:100%;height:100%}
#templates .template-grid{align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#templates .template-card{display:flex;flex-direction:column;border-radius:12px;box-shadow:0 3px 12px #17203306;transition:box-shadow .15s,border-color .15s}
#templates .template-card:hover{border-color:#c9c4eb;box-shadow:0 6px 20px #17203310}
#templates .template-info{display:flex;flex:1;flex-direction:column;padding:16px}
#templates .template-info>b{font-size:14px;line-height:1.5;color:#25283a}
#templates .template-info>p{font-size:12px;line-height:1.6;margin:8px 0 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#templates .template-footer{margin-top:auto;gap:10px}
#templates .template-footer .tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#templates .template-footer button{flex-shrink:0}
#templatePreviewStage{height:auto;aspect-ratio:16/9;padding:0;overflow:hidden}
#templatePreviewBackdrop [hidden]{display:none!important}
#templates .template-toolbar{flex-wrap:wrap}
#square .square-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;padding:0;border:0;background:#f3f4f8;cursor:pointer}
#square .square-cover:after{display:none}
#square .square-cover>svg{display:block;width:100%;height:100%}
#square .square-card-title b{white-space:normal;line-height:1.5}
#square .square-card-footer,#square .square-card-actions{flex-wrap:wrap}
#square .square-results{margin:14px 0;font-size:12px;color:#72798b}
.square-preview-stage{aspect-ratio:16/9;background:#f3f4f8;overflow:hidden}
.square-preview-stage svg{display:block;width:100%;height:100%}
.square-preview-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px}
#squareTemplatePreview .modal{width:min(1000px,94vw);max-height:94vh;overflow:auto}
#squareTemplatePreview .square-preview-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
@media(max-width:1100px){#templates .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#templates .template-grid{grid-template-columns:1fr}#templates .template-toolbar .segmented{width:100%}}