.template-meta em { color: #8a8378; font-size: 11px; font-style: normal; font-weight: 700; }
.template-details { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.template-details span { border: 1px solid #d8d2c7; border-radius: 999px; color: #625c52; font-size: 11px; padding: 4px 8px; }
html[data-theme="dark"] .template-details span { border-color: #555047; color: #c8c1b5; }
@media (min-width: 801px) { .template-modal section { width: min(2000px, calc(100% - 32px)); height: min(1600px, calc(100% - 32px)); } }
.template-modal header p, .template-modal .template-details { display: none; }
.template-modal header { min-height: 68px; padding: 14px 20px; }
.template-modal .modal-close { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; line-height: 1; transition: background .15s, color .15s, transform .15s; }
.template-modal .modal-close:hover, .template-modal .modal-close:focus-visible { background: #e7e1d7; outline: none; }
.template-modal .modal-close:active { transform: scale(.9); }
.template-modal footer button { cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.template-modal footer button:hover, .template-modal footer button:focus-visible { transform: translateY(-2px); outline: none; }
.template-modal footer button:active { transform: translateY(0) scale(.96); }
.template-modal footer .secondary:hover, .template-modal footer .secondary:focus-visible { background: #d9d1c5; }
.template-modal footer #deploy-template:hover, .template-modal footer #deploy-template:focus-visible { background: #11100e; box-shadow: 0 8px 20px #29272130; }
.template-modal footer button:disabled { cursor: default; opacity: .55; transform: none; box-shadow: none; }
html[data-theme="dark"] .template-modal .modal-close { color: #eee9df; }
html[data-theme="dark"] .template-modal .modal-close:hover, html[data-theme="dark"] .template-modal .modal-close:focus-visible { background: #3a3731; }
html[data-theme="dark"] .template-modal footer .secondary { background: #454139; color: #f3eee5; }
html[data-theme="dark"] .template-modal footer .secondary:hover, html[data-theme="dark"] .template-modal footer .secondary:focus-visible { background: #585249; color: #fff; }
html[data-theme="dark"] .template-modal footer #deploy-template { background: #f1ece3; color: #211f1b; }
html[data-theme="dark"] .template-modal footer #deploy-template:hover, html[data-theme="dark"] .template-modal footer #deploy-template:focus-visible { background: #fff; box-shadow: 0 8px 22px #0008; }