.tl-header { background:#212529; }
  .tgp { background:#f8fafc; border:1px solid #e9ecef; border-radius:8px; padding:10px 12px; }
  .tgp-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 0; }
  .tgp-name { font-size:.78rem; color:#334155; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tgp-dots { display:inline-flex; gap:4px; }
  .tgp-dot { width:9px; height:9px; border-radius:50%; background:#B8860B; opacity:.75; }
  .tgp-inf { color:#B8860B; font-weight:800; }
  .tgp-more { font-size:.7rem; color:#94a3b8; margin-top:3px; }
  .tg-tag { font-size:.68rem; font-weight:600; background:#f1f3f5; color:#495057; border:1px solid #e2e8f0; border-radius:999px; padding:2px 9px; }
  /* Related-template cards (_gallery_card.html): same styling as the gallery
     page. The !important size counters base_generic's mobile h3 inflation
     (h2,h3,h4 { 1.25rem !important } under 768px). */
  .tg-card { transition: transform .15s ease, box-shadow .15s ease; }
  .tg-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.10) !important; }
  .tg-name { font-size: 1.05rem !important; }
  .tg-name a { color:#111827; text-decoration:none; }
  .tg-name a:hover { text-decoration:underline; }
  /* Field badges: allow long custom-question prompts to wrap instead of
     overflowing the card. Bootstrap .badge is white-space:nowrap by default. */
  .tl-field { white-space:normal; text-align:left; max-width:100%; word-break:break-word; line-height:1.35; }
  .tl-collects-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; }
  /* Realistic sheet preview (mirrors the homepage hero mockup). */
  .tl-sheet { background:#fff; border:1px solid #dee2e6; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.05); overflow:hidden; font-size:.85rem; }
  .tl-sheet-header { background:#1e293b; color:#f8fafc; padding:14px 18px; }
  .tl-sheet-sub { font-size:.72rem; color:#cbd5e1; margin-top:2px; }
  .tl-sheet-body { padding:14px 16px; }
  .tl-sheet-row { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid #e2e8f0; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
  .tl-sheet-row:last-child { margin-bottom:0; }
  .tl-sheet-cap { font-size:.72rem; color:#64748b; margin-top:2px; }
  .tl-meter { display:flex; gap:3px; margin-top:5px; flex-wrap:wrap; }
  .tl-dot { width:14px; height:6px; border-radius:3px; background:#e2e8f0; }
  .tl-sheet-btn { font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:6px; white-space:nowrap; background:#B8860B; color:#fff; }
  .tl-sheet-more { font-size:.72rem; color:#94a3b8; padding-top:2px; }
  @media (min-width:992px){ .tl-cta { position:sticky; top:1rem; } }
  .btn:focus-visible, a:focus-visible { outline:3px solid #B8860B; outline-offset:2px; }