/* kulou 共享组件基础样式（breadcrumb / pagination / article-nav / related / back-to-top）
 * 各主题通过 CSS 变量覆盖：--tpl-accent --tpl-text --tpl-muted --tpl-line --tpl-surface --tpl-radius
 */
.tpl-breadcrumb { font-size: 13px; color: var(--tpl-muted, #64748b); margin: 0 0 16px; }
.tpl-breadcrumb__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tpl-breadcrumb__item:not(:last-child)::after { content: "›"; margin-left: 6px; opacity: .55; }
.tpl-breadcrumb a { color: inherit; text-decoration: none; }
.tpl-breadcrumb a:hover { color: var(--tpl-accent, #2563eb); text-decoration: underline; }

.tpl-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 32px 0 8px; font-size: 14px; }
.tpl-pager a, .tpl-pager span { display: inline-block; min-width: 36px; padding: 7px 12px; text-align: center; text-decoration: none; border: 1px solid var(--tpl-line, #e2e8f0); border-radius: var(--tpl-radius, 8px); color: var(--tpl-text, inherit); background: var(--tpl-surface, transparent); }
.tpl-pager a:hover { border-color: var(--tpl-accent, #2563eb); color: var(--tpl-accent, #2563eb); }
.tpl-pager .is-current { background: var(--tpl-accent, #2563eb); border-color: var(--tpl-accent, #2563eb); color: #fff; }
.tpl-pager__gap, .tpl-pager__info { border-color: transparent !important; background: transparent !important; color: var(--tpl-muted, #64748b) !important; }

.tpl-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--tpl-line, #e2e8f0); }
@media (max-width: 640px) { .tpl-postnav { grid-template-columns: 1fr; } }
.tpl-postnav__item { padding: 14px 16px; border: 1px solid var(--tpl-line, #e2e8f0); border-radius: var(--tpl-radius, 8px); background: var(--tpl-surface, transparent); min-width: 0; }
.tpl-postnav__item--next { text-align: right; }
.tpl-postnav__label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--tpl-muted, #64748b); }
.tpl-postnav a { color: var(--tpl-text, inherit); text-decoration: none; font-weight: 600; line-height: 1.45; }
.tpl-postnav a:hover { color: var(--tpl-accent, #2563eb); }
.tpl-postnav__none { color: var(--tpl-muted, #64748b); }

.tpl-related { margin-top: 32px; }
.tpl-related__title { font-size: 1.15rem; margin: 0 0 14px; }
.tpl-related__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tpl-related__item a { display: block; color: inherit; text-decoration: none; }
.tpl-related__item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tpl-radius, 8px); }
.tpl-related__name { display: block; margin-top: 6px; font-weight: 600; line-height: 1.4; }
.tpl-related time { font-size: 12px; color: var(--tpl-muted, #64748b); }

.tpl-totop { position: fixed; right: 20px; bottom: 24px; z-index: 90; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tpl-accent, #2563eb); color: #fff; text-decoration: none; font-size: 18px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tpl-totop.is-visible { opacity: 1; pointer-events: auto; }