/* Day 8: Templates Gallery */
.tpl-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.tpl-head h2 { font-size:22px; font-weight:700; color:#1A1A2E; flex:1; }
.tpl-hint { background:#EBF8F4; border:1px solid #10B98133; color:#065F46; border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:20px; }
.tpl-hint b { color:#047857; }

.tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.tpl-card { background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:20px; display:flex; flex-direction:column; transition:all .15s; }
.tpl-card:hover { border-color:#10B981; box-shadow:0 4px 14px rgba(16,185,129,.12); transform:translateY(-1px); }
.tpl-card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.tpl-emoji { font-size:34px; line-height:1; }
.tpl-name { flex:1; font-size:17px; font-weight:700; color:#1A1A2E; line-height:1.25; }
.tpl-slug { font-family:'SF Mono',Monaco,monospace; font-size:10px; color:#9CA3AF; text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }

.tpl-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.tpl-meta-item { font-size:11px; background:#F3F4F6; color:#4B5563; padding:3px 9px; border-radius:5px; font-weight:500; }
.tpl-meta-item.fmt-executive { background:#FEF3C7; color:#92400E; }
.tpl-meta-item.fmt-full { background:#DBEAFE; color:#1E40AF; }
.tpl-meta-item.fmt-compact { background:#E5E7EB; color:#374151; }

.tpl-blocks { border-top:1px solid #F3F4F6; padding-top:12px; margin-bottom:14px; flex:1; }
.tpl-blocks-title { font-size:10px; color:#9CA3AF; text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-bottom:8px; }
.tpl-block { padding:7px 0; border-bottom:1px dashed #F3F4F6; font-size:12.5px; color:#374151; }
.tpl-block:last-child { border-bottom:none; }
.tpl-block-title { display:flex; align-items:center; gap:6px; font-weight:600; margin-bottom:3px; }
.tpl-block-tags { font-size:11px; color:#6B7280; padding-left:22px; }
.tpl-block-tag { display:inline-block; background:#F9FAFB; border:1px solid #E5E7EB; padding:1px 6px; border-radius:3px; margin-right:3px; font-family:'SF Mono',Monaco,monospace; font-size:10px; }

.tpl-actions { display:flex; gap:8px; padding-top:12px; border-top:1px solid #F3F4F6; }
.tpl-btn { flex:1; padding:9px 14px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:all .12s; }
.tpl-btn.primary { background:#10B981; color:#fff; }
.tpl-btn.primary:hover { background:#059669; }
.tpl-btn.secondary { background:#fff; color:#4B5563; border:1px solid #E5E7EB; }
.tpl-btn.secondary:hover { background:#F9FAFB; }

.tpl-loading { padding:40px; text-align:center; color:#9CA3AF; font-size:14px; }
.tpl-error { padding:20px; background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; border-radius:8px; margin:20px 0; }