#templates-hero{text-align:center;padding:10rem 0 2rem}@media (max-width:1024px){#templates-hero{padding:6rem 1.25rem 1.5rem}}@media (max-width:768px){#templates-hero{padding:5.5rem 1.25rem 1.5rem}}#templates-hero .templates-hero__title{letter-spacing:-.03em;margin-bottom:1rem;font-size:2.5rem;font-weight:700;line-height:1.1}@media (max-width:1024px){#templates-hero .templates-hero__title{font-size:2rem}}#templates-hero .templates-hero__subtitle{color:var(--tf-text-muted);max-width:34rem;margin:0 auto;font-size:1rem;line-height:1.6}.template-filters{background-color:var(--tf-bg-card);border-radius:var(--tf-radius-card);box-shadow:var(--tf-shadow-xs);flex-wrap:wrap;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding:1rem 1.25rem;display:flex}@media (max-width:768px){.template-filters{gap:1rem;padding:1rem}}.template-filters__group{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}@media (max-width:768px){.template-filters__group{width:100%}}.template-filters__hint{width:100%;color:var(--tf-text-muted);margin-top:.25rem;font-size:.6875rem;font-style:italic}.template-filters__label{text-transform:uppercase;letter-spacing:.04em;color:var(--tf-text-muted);flex-shrink:0;font-size:.6875rem;font-weight:600}.template-filters__chips{flex-wrap:wrap;gap:.5rem;display:flex}.template-filters__clear{color:var(--tf-text-muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:.25rem;margin-left:auto;font-size:.75rem;display:inline-flex}.template-filters__clear:hover{color:var(--tf-text-primary)}@media (max-width:768px){.template-filters__clear{margin-left:0}}.template-chip{border-radius:var(--tf-radius-pill);border:1px solid var(--tf-border-light);color:var(--tf-text-muted);cursor:pointer;transition:var(--tf-transition);white-space:nowrap;background-color:#0000;padding:.375rem .875rem;font-size:.75rem;font-weight:500}.template-chip:hover{border-color:var(--tf-border-strong);color:var(--tf-text-primary)}.template-chip.active{background-color:var(--tf-black);border-color:var(--tf-black);color:var(--tf-text-inverse)}.template-gallery{padding-bottom:6rem}.template-gallery__grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;display:grid}@media (max-width:1366px){.template-gallery__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.template-gallery__grid{grid-template-columns:1fr}}.template-gallery__empty{text-align:center;color:var(--tf-text-muted);padding:5rem 1rem}.template-gallery__empty p strong{color:var(--tf-text-primary);font-size:1.125rem}.template-gallery__empty button{color:var(--tf-primary);cursor:pointer;background:0 0;border:none;margin-top:.75rem;font-weight:600;text-decoration:underline}.template-card{text-align:left;background-color:var(--tf-bg-card);border-radius:var(--tf-radius-card);width:100%;box-shadow:var(--tf-shadow-xs);cursor:pointer;font:inherit;color:inherit;transition:transform var(--tf-transition-default),box-shadow var(--tf-transition-default);border:none;padding:0;display:block;overflow:hidden}.template-card:hover,.template-card:focus-visible{box-shadow:var(--tf-shadow-sm);transform:translateY(-3px)}.template-card:hover .template-card__hint,.template-card:focus-visible .template-card__hint{opacity:1}.template-card:focus-visible{outline:2px solid var(--tf-black);outline-offset:2px}.template-card__media{aspect-ratio:16/10;background-color:var(--tf-bg-muted);position:relative;overflow:hidden}.template-card__media-el{object-fit:cover;object-position:top center;width:100%;height:100%}.template-card__badge{border-radius:var(--tf-radius-pill);background-color:var(--tf-button-brand-bg);color:var(--tf-button-brand-text);text-transform:uppercase;letter-spacing:.04em;padding:.25rem .625rem;font-size:.625rem;font-weight:700;position:absolute;top:.75rem;left:.75rem}.template-card__hint{border-radius:var(--tf-radius-pill);color:#fff;opacity:0;transition:opacity var(--tf-transition-default);background-color:#000000a6;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.6875rem;font-weight:500;display:inline-flex;position:absolute;bottom:.75rem;right:.75rem}@media (max-width:768px){.template-card__hint{opacity:1}}.template-card__body{padding:1rem}.template-card__name{margin:0 0 .5rem;font-size:1rem;font-weight:600}.template-card__tags{flex-wrap:wrap;gap:.375rem;display:flex}.template-card__tag{color:var(--tf-text-secondary);background-color:var(--tf-bg-muted);border-radius:var(--tf-radius-pill);padding:.25rem .625rem;font-size:.6875rem;font-weight:500}:is(.modal-content:has(.template-preview) .card-header,.modal-content:has(.template-preview) .card-divider){display:none}.modal-overlay:has(.template-preview){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.template-preview{grid-template-columns:1fr 300px;gap:1.5rem;height:620px;display:grid;position:relative}@media (max-width:1024px){.template-preview{grid-template-columns:1fr;height:auto}.template-preview .template-preview__left{height:360px}}.template-preview__left,.template-preview__right{min-width:0;min-height:0}.template-preview__left{flex-direction:column;gap:.75rem;display:flex}.template-preview__toolbar{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.template-preview__device{border-radius:var(--tf-radius-input);border:1px solid var(--tf-border-light);background-color:var(--tf-bg-card);width:2.25rem;height:2.25rem;color:var(--tf-text-muted);cursor:pointer;transition:var(--tf-transition);justify-content:center;align-items:center;display:flex}.template-preview__device:hover{border-color:var(--tf-border-strong);color:var(--tf-text-primary)}.template-preview__device.active{background-color:var(--tf-black);border-color:var(--tf-black);color:var(--tf-text-inverse);cursor:default}.template-preview__frame-area{background-color:var(--tf-bg-muted);border-radius:var(--tf-radius-card);flex:1;justify-content:center;align-items:center;min-height:0;padding:1rem;display:flex;overflow:hidden}.template-preview__frame{border-radius:var(--tf-radius-input);max-width:100%;max-height:100%;box-shadow:var(--tf-shadow-sm);background-color:#fff;position:relative;overflow:hidden}.template-preview__frame.mobile{border:6px solid var(--tf-black);border-radius:20px}.template-preview__iframe{transform-origin:0 0;opacity:0;border:none;transition:opacity .2s;position:absolute;top:0;left:0}.template-preview__iframe.loaded{opacity:1}.template-preview__right{flex-direction:column;justify-content:center;gap:1.25rem;display:flex;overflow-y:auto}.template-preview__right-content{flex-direction:column;gap:1rem;display:flex}.template-preview__badge{border-radius:var(--tf-radius-pill);background-color:var(--tf-button-brand-bg);color:var(--tf-button-brand-text);text-transform:uppercase;letter-spacing:.04em;align-self:flex-start;padding:.25rem .625rem;font-size:.625rem;font-weight:700}.template-preview__name{letter-spacing:-.02em;margin:0;font-size:1.5rem;font-weight:700}.template-preview__tags{flex-wrap:wrap;gap:.375rem;display:flex}.template-preview__tag{color:var(--tf-text-secondary);background-color:var(--tf-bg-muted);border-radius:var(--tf-radius-pill);padding:.25rem .625rem;font-size:.6875rem;font-weight:500}.template-preview__description{color:var(--tf-text-muted);margin:0;font-size:.875rem;line-height:1.6}.template-preview__actions{flex-flow:wrap;align-items:center;gap:1rem;display:flex}.template-preview__full-link{color:var(--tf-text-muted);align-items:center;gap:.375rem;font-size:.8125rem;font-weight:500;display:inline-flex}.template-preview__full-link:hover{color:var(--tf-text-primary)}.template-preview__close{z-index:1;cursor:pointer;width:2.25rem;height:2.25rem;color:var(--tf-text-muted);border-radius:var(--tf-radius-input);transition:var(--tf-transition);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:0;right:0}.template-preview__close:hover{color:var(--tf-primary);background-color:var(--tf-bg-muted)}
