.template-card{position:relative;width:224px}.template-card>:is(a,.template-card-unavailable){display:flex;flex-direction:column;gap:12px}.template-card .template-card-thumb{position:relative;height:322px;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-l);background:var(--surface-default)}.template-card .template-card-cover{position:absolute;left:20px;top:54px;width:180px;height:266px;object-fit:cover}.template-card .template-card-thumb:after{content:"";position:absolute;left:20px;top:54px;width:180px;height:266px;background:var(--overlay-control);opacity:0}.template-card .template-card-thumb .ui-card-badge{position:absolute;left:10px;top:10px}.template-card-preview{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-full);background:var(--brand-accent);color:var(--icon-inverse);opacity:0;transform:translate(-50%,-50%)}.template-card .template-card-preview{left:110px;top:187px}.template-card .template-card-info{display:flex;flex-direction:column;gap:8px}.template-card .template-card-info h3{color:var(--text-primary);font-size:16px;font-weight:700;line-height:24px;letter-spacing:-.02em}.template-card .template-card-info p{margin-top:2px;color:var(--text-tertiary);font-size:13px;line-height:18px;letter-spacing:-.02em}.template-card .template-card-tags{display:flex;flex-wrap:wrap;gap:4px}.template-card .template-card-info strong{font-size:16px;font-weight:700;line-height:24px;letter-spacing:-.02em}.template-card>a:hover .template-card-thumb{background:var(--surface-subtle)}.template-card>a:hover .template-card-preview,.template-card>a:hover .template-card-thumb:after{opacity:1}.template-card>a:hover .template-card-info h3{color:var(--text-link)}.template-card>.ui-like-button{position:absolute;left:179px;top:11px;z-index:1}.template-card-simple{display:flex;flex:none;flex-direction:column;gap:8px;width:152px}.template-card-simple .template-card-simple-thumb{position:relative;width:152px;height:225px;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-l);background:var(--surface-default)}.template-card-simple .template-card-simple-thumb>img{display:block;width:100%;height:100%;object-fit:cover}.template-card-simple .template-card-simple-thumb:after{content:"";position:absolute;inset:0;background:var(--overlay-control);opacity:0}.template-card-simple .template-card-preview{left:50%;top:50%}.template-card-simple .template-card-simple-thumb .ui-card-badge{position:absolute;left:7px;top:7px}.template-card-simple .template-card-simple-info{display:flex;flex-direction:column;gap:4px}.template-card-simple .template-card-simple-info h3{display:-webkit-box;overflow:hidden;color:var(--text-primary);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.02em;-webkit-box-orient:vertical;-webkit-line-clamp:2}.template-card-simple .template-card-simple-info p{color:var(--text-tertiary);font-size:12px;line-height:16px;letter-spacing:-.01em}.template-card-simple .template-card-simple-info strong{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.02em}.template-card-simple:hover .template-card-preview,.template-card-simple:hover .template-card-simple-thumb:after{opacity:1}.template-card-simple:hover .template-card-simple-info h3{color:var(--text-link)}.template-card-unavailable .template-card-cover{opacity:.5}