.template-library-page{min-height:100vh;background:#f7f9fc}
.template-library-view{min-height:calc(100vh - 66px)}
.examples-main{max-width:1900px;margin:auto;padding:24px 32px 32px}
.template-library-status[data-error="true"]{position:static;display:block;width:auto;height:auto;margin:0 0 12px;overflow:visible;clip:auto;clip-path:none;color:#b13d3d;font-size:12px}
.example-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr));gap:18px;align-items:start}
.example-card{min-width:0;overflow:hidden;border:1px solid #dfe5ed;border-radius:10px;background:#fff;container-type:inline-size}
.example-card-heading{position:relative;height:48px;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 18px;border-bottom:1px solid #e7ebf0;background:#fff}
.example-card-heading .type-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:68px;height:26px;padding:0 8px;border-radius:6px;background:#e7edf6;color:#3a5677;font-size:11px;font-weight:600;white-space:nowrap}
.example-card-heading .type-badge[hidden]{display:none}
.example-card-heading .type-badge.is-current{background:#3a5677;color:#fff}
.template-create-button{flex:0 0 auto;width:28px;height:28px;margin:0;border-radius:6px}
.template-create-button .btn-icon{width:18px;height:18px}
.template-create-button:disabled{opacity:.48;cursor:wait}
.example-card-copy{height:96px;padding:11px 18px 12px;overflow:hidden}
.example-card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;height:23px;margin:0 0 5px;font-size:15px;line-height:23px;font-weight:600;color:#2a3a4f}
.example-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:38px;max-height:38px;margin:0;color:#67758a;font-size:12px;line-height:19px}
.template-card-preview{position:relative;height:calc((100cqw - 24px) * 1.4142857 + 24px);overflow:hidden;border-top:1px solid #e7ebf0;background:#8f959e}
.template-card-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#8f959e}
.template-preview-status{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);margin:0;padding:5px 9px;border-radius:6px;background:#ffffffdc;color:#718096;font-size:11px;pointer-events:none}
.template-preview-status[hidden]{display:none}
.nav-square svg[hidden]{display:none}
body.show-template-library #examples-link-top [data-nav-icon="templates"]{display:none}
body.show-template-library #examples-link-top [data-nav-icon="editor"]{display:block}
@media(max-width:760px){.examples-main{padding:16px}.example-cards{grid-template-columns:1fr;gap:14px}.example-card-copy{height:96px;padding:11px 14px 12px}.example-card-heading{padding:0 14px}}
@media(max-width:460px){.examples-main{padding:12px}}

.template-preview-toggle{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:44px;height:32px;cursor:pointer;z-index:2}
.template-preview-toggle input{appearance:none;position:relative;display:block;flex:0 0 auto;width:32px;height:18px;margin:0;padding:0;border:0;border-radius:10px;background:#d0d8e3;box-shadow:none;cursor:pointer;transition:background .15s}
.template-preview-toggle input::before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #233e6030;transition:transform .15s}
.template-preview-toggle input:checked{background:#3a5677;box-shadow:none}
.template-preview-toggle input:checked::before{transform:translateX(14px)}
.template-preview-toggle input:focus:not(:focus-visible){outline:none}
.template-preview-toggle input:focus-visible{outline:2px solid #3a5677;outline-offset:3px}
.template-preview-hint{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:250px;padding:7px 10px;border:1px solid #dfe5ed;border-radius:6px;background:#fff;color:#3a5677;font-size:11px;box-shadow:0 2px 8px #0002;pointer-events:none}
.template-preview-toggle:hover:not(.hint-dismissed) .template-preview-hint{display:block}
.template-card-snapshot{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;background:#fff;box-shadow:0 1px 2px #0005,0 12px 32px #0004}
.template-card-snapshot[hidden]{display:none}