/* ============================================================
 *  Being Blog Theme · theme.css
 *  在 Being 原生 style.css 基础上做的功能性扩展样式
 *  作用：覆盖参考主题需要、但 Being 没有的区块（顶栏 / 滚动新闻 /
 *  侧栏 widget / 面包屑 / 评论 / 标签云 / Cookie 提示 / 个人中心 / 错误页）
 * ============================================================ */

:root {
    --tz-primary: #ff7a59;
    --tz-text: #2b2b2b;
    --tz-muted: #888;
    --tz-border: #eee;
    --tz-bg-soft: #f7f6f3;
    --tz-bg-card: #fff;
    --tz-radius: 6px;
    --tz-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* ---------- 字体：ZCOOL QingKe HuangYou (楷体风格) ---------- */
body {
    color: var(--tz-text);
    font-family: 'ZCOOL QingKe HuangYou', 'Muli', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 15px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'ZCOOL QingKe HuangYou', 'Muli', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
/* 正文字号微调 */
.entry-content { font-size: 15px; line-height: 1.9; }
.post h3 a, .spotlight-card h5 a, .post-round h5 a { font-size: inherit; }
.hero .post h3 { font-size: 1.6rem; }
.section-heading .title { font-size: 1.3rem; letter-spacing: .04em; }

/* ---------- Top Bar ---------- */
.topbar {
    background: #1c1c1c;
    color: #d9d9d9;
    font-size: 13px;
    padding: 8px 0;
    position: fixed;          /* 顶栏也固定 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1032;
    height: 38px;
}
.topbar a { color: #d9d9d9; }
.topbar a:hover { color: var(--tz-primary); }
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 100%;
}
.topbar-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; height: 100%; }

.news-feed {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.news-feed-label {
    background: var(--tz-primary);
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: .5px;
}
.news-feed-track {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    height: 24px;
}
.news-feed-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 40px;
    animation: tz-marquee 32s linear infinite;
    white-space: nowrap;
    width: max-content;
}
.news-feed-list li a { color: #e4e4e4; }
.news-feed-list li a.news-feed-empty { color: #ff7a59; }
@keyframes tz-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.news-feed:hover .news-feed-list { animation-play-state: paused; }

.lang-switch { font-size: 13px; }
.lang-switch a { font-weight: 600; margin-left: 4px; }

/* Theme switch override (topbar 内) */
.topbar .theme-switch-wrapper { margin: 0; padding: 0; display: flex; align-items: center; height: 100%; }
.topbar .theme-switch-wrapper label.theme-switch { margin: 0; }
.topbar .theme-switch { width: 44px; height: 22px; position: relative; }
.topbar .theme-switch input { width: 0 !important; height: 0 !important; opacity: 0; position: absolute; }
.topbar .theme-switch .slider {
    width: auto !important;
    height: auto !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 22px;
    position: absolute;
}
.topbar .theme-switch .slider i {
    line-height: 22px !important;
    font-size: 12px !important;
    color: #d9d9d9 !important;
}
.topbar .theme-switch .slider i:hover,
.topbar .theme-switch:hover .slider i {
    color: var(--tz-primary) !important;
}

/* ---------- Navbar tweak ---------- */
.navbar.fixed-top { top: 38px; }     /* 顶栏高度 = 38px */
body.has-tz-topbar { padding-top: 0; }
@media (max-width: 991px) {
    .navbar.fixed-top { top: 0; }
    .topbar { display: none; }
}

.navbar .navbar-right { display: flex; align-items: center; gap: 14px; }
/* 只针对真实可见子项统一高度 35px，避免命中 <style> 之类的标签。
   ⚠️ 不要在这里覆盖 .navbar-toggler — 否则会让 toggler 在 PC（≥992px）上也变成 display:flex 显示出来。 */
.navbar .navbar-right > div:not(.navbar-toggler),
.navbar .navbar-right > a.navbar-lang-switch,
.navbar .navbar-right > label {
    height: 35px; display: flex; align-items: center; justify-content: center;
}
.navbar .navbar-right > style { display: none !important; }
.navbar .social-icones { margin: 0 !important; padding: 0 !important; height: 35px; }

/* 移动端语言切换按钮（圆形纽扣） */
.navbar-lang-switch {
    width: 30px; height: 30px !important; border-radius: 50%;
    background: #f7f7f7; color: #222 !important;
    font-size: 13px; font-weight: 700;
    text-decoration: none !important;
    transition: all .3s ease;
}
.navbar-lang-switch:hover { background: #fee86d; color: #222 !important; }
body.dark-theme .navbar-lang-switch { background: #2a2a2a; color: #e4e4e4 !important; }
.navbar .social-icones .list-inline {
    margin: 0 !important; padding: 0 !important;
    display: flex !important; align-items: center !important;
    height: 35px;
}
.navbar .social-icones .list-inline > li {
    margin: 0 !important; padding: 0 !important;
    display: flex !important; align-items: center !important;
    height: 35px;
}
.navbar .social-icones .list-inline > li > a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    height: 35px;
}
/* 用最具体的选择器 + 限定直接子代，避免误中 .header-social-hover-img 里那张 128px 二维码 */
.navbar .navbar-right .social-icones .list-inline > li > a > img,
.navbar .navbar-right .social-icones .list-inline > li > a img.social-link {
    width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important;
    min-width: 0 !important; min-height: 0 !important;
    object-fit: cover; border-radius: 50%;
    display: block !important;
}
/* 二维码悬浮图：默认隐藏（除了 hover），强制脱离 flex 流不影响布局 */
.navbar .navbar-right .header-social-hover-img { position: absolute !important; }
.navbar .search-icon { cursor: pointer; }

/* header 社交项 hover 时显示二维码图（原本在 header.html 内联 <style>，挪到这里避免被当节点渲染） */
.header-social-item:hover .header-social-hover-img { display: block !important; }

/* 移动端搜索弹窗：覆盖 style.css 强制 column 堆叠 + 强制垂直居中 + 安全间距 */
@media (max-width: 576px) {
    /* .search 是 fixed 全屏遮罩：用 flex 把内容真正垂直水平居中 */
    .search {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 80px 20px !important;       /* 上下 80 / 左右 20 安全区，让弹窗远离边缘 */
        box-sizing: border-box !important;
    }
    /* 关闭按钮：右上角，且 z-index 高于一切，避免被遮罩盖住看不见 */
    .search .close {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 10 !important;
    }
    .search-width {
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important; padding: 0 !important;
    }
    .search-form {
        flex-direction: row !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 56px !important;
        box-shadow: 0 8px 24px 0 rgba(0,0,0,.12) !important;
        border-radius: 30px !important;
        overflow: hidden;
    }
    .search-form input {
        width: auto !important; flex: 1 1 auto !important;
        border-radius: 30px 0 0 30px !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 18px !important;
        min-width: 0 !important;
        height: 100% !important;
    }
    .search-form .search-btn {
        width: auto !important;
        flex: 0 0 auto !important;
        height: 100% !important;
        border-radius: 0 30px 30px 0 !important;
        margin-top: 0 !important;
        padding: 0 22px !important;
        white-space: nowrap;
    }
}

/* ---------- Mobile theme switch（在 navbar-right 内，纯图标无背景） ---------- */
.navbar .navbar-theme-switch { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; width: 35px; height: 35px; }
.navbar .navbar-theme-switch label.theme-switch { margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; cursor: pointer; position: static; }
.navbar .navbar-theme-switch .theme-switch input { display: none; }
.navbar .navbar-theme-switch .slider {
    position: static !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    width: auto !important; height: auto !important;
    background: transparent !important; border: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1 !important;
}
.navbar .navbar-theme-switch .slider i { line-height: 1 !important; font-size: 16px !important; color: #6b6768 !important; }
.navbar .navbar-theme-switch .slider .icon-dark { display: none; }
.navbar .navbar-theme-switch input:checked + .slider .icon-dark { display: inline-block; }
.navbar .navbar-theme-switch input:checked + .slider .icon-light { display: none; }
body.dark-theme .navbar .navbar-theme-switch .slider i { color: #e4e4e4 !important; }

/* ---------- 移动端 navbar 布局修复（≤991px） ---------- */
@media (max-width: 991px) {
    /* navbar 自身的上下 padding：保留参考的 20px，给内容留呼吸空间 */
    .navbar {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    /* container 用 flex：logo + navbar-right 同行，展开的 navbar-collapse 折行到下方占满整行 */
    .navbar > .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        position: static !important;
    }
    /* navbar-collapse 占满 100% 宽度并被 order 推到 logo/navbar-right 之后（下一行） */
    .navbar > .container > .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        order: 99;
    }
    /* 不要在 .show 上加 padding —— Bootstrap collapse 动画基于"展开后元素高度"做 height transition，
       若 padding 只在 .show 出现，会在动画末尾突然撑高造成跳动。
       把上间距改到内部 .navbar-nav，始终参与高度测量 */
    .navbar > .container > .navbar-collapse .navbar-nav { margin-top: 15px; }
    .navbar-right {
        position: static !important;
        right: auto !important; top: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        margin-left: auto !important;
    }

    .navbar .logo { flex: 0 0 auto; max-width: 45%; overflow: hidden; }
    .navbar .logo a { display: inline-block; line-height: 0; }
    .navbar .logo img { max-height: 40px !important; height: 40px !important; width: auto !important; }

    .navbar .social-icones { margin: 0 !important; }
    .navbar .social-icones .list-inline {
        display: flex !important; align-items: center; gap: 8px;
        margin: 0 !important; padding: 0 !important;
    }
    .navbar .social-icones .list-inline > li { padding: 0; margin: 0; line-height: 1; }

    /* toggler：仅在 <992px 显示，去掉默认描边/背景，只留 3 根横线 */
    .navbar-toggler,
    .navbar-right > button.navbar-toggler {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        margin-left: 0 !important;
        padding: 0 !important;
        width: 30px !important;
        height: 35px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler:hover { box-shadow: none !important; outline: none !important; border: 0 !important; background: transparent !important; }
    .navbar-toggler .navbar-toggler-icon {
        background-image: none !important;
        border: 0 !important;
        /* 保留 style.css 里 span { position:absolute; height:2px; background:#222; box-shadow: ±8px } 的 3 道横线 */
    }
}

@media (max-width: 576px) {
    /* padding-top 加大到 24px，把内容压离刘海 */
    .navbar { padding-top: 24px !important; padding-bottom: 20px !important; padding-left: 12px !important; padding-right: 12px !important; }
    .navbar > .container { padding-left: 0 !important; padding-right: 0 !important; }
    .navbar .logo img { max-height: 32px !important; height: 32px !important; }
    .navbar-right { gap: 8px !important; }
    .navbar .social-icones .list-inline { gap: 8px; }
    /* iPhone 宽度（~390px）保留 3 个社交图标，参考图就是这样 */
    .navbar .social-icones .list-inline > li:nth-child(n+4) { display: none; }
    /* 给社交图标加白色底圆 + 细边，避免深色 PNG 图标和黑色刘海视觉粘连 */
    .navbar .social-icones .list-inline > li > a {
        width: 28px !important; height: 28px !important;
        background: #fff !important;
        border: 1px solid #ececec !important;
        border-radius: 50% !important;
        overflow: hidden;
    }
    .navbar .navbar-right .social-icones .list-inline > li > a > img {
        width: 16px !important; height: 16px !important;
        max-width: 16px !important; max-height: 16px !important;
    }
}

@media (max-width: 360px) {
    /* 极窄屏（< iPhone SE）才砍社交图标到 2 个，仍不全隐藏 */
    .navbar-right { gap: 6px !important; }
    .navbar .social-icones .list-inline { gap: 8px; }
    .navbar .social-icones .list-inline > li:nth-child(n+3) { display: none; }
}

/* dropdown 高亮 */
.template-main-menu .menu-item-has-children.is-active > a,
.template-main-menu .nav-link.is-active { color: var(--tz-primary) !important; }

/* style.css 把 .dropdown-menu li 设为 inline-block（横排），覆盖为竖排 */
.navbar .nav-item .dropdown-menu li {
    display: block !important;
    margin-right: 0 !important;
}
.navbar .nav-item .dropdown-menu .dropdown-item {
    display: block !important;
    white-space: nowrap;
    padding: 6px 0 !important;
}
/* style.css 的 :before 全宽下划线在竖排模式下会撑满整个 dropdown 宽度，改为左侧短竖线 hover 效果 */
.navbar .nav-item .dropdown-menu .dropdown-item:before {
    display: none !important;
}
.navbar .nav-item .dropdown-menu .dropdown-item:hover,
.navbar .nav-item .dropdown-menu .dropdown-item.active {
    color: var(--tz-primary) !important;
    background-color: transparent !important;
    padding-left: 10px !important;
    border-left: 3px solid var(--tz-primary);
    transition: padding .15s, color .15s;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-wrap {
    background: var(--tz-bg-soft);
    padding: 24px 0 !important;
    margin-top: 128px;   /* 让出 topbar(38) + nav(~90) 高度 */
    display: flex !important;
    align-items: center !important;
    min-height: 80px !important;
}
.breadcrumb-wrap > .container { width: 100%; align-self: center; }
.breadcrumb-wrap nav { width: 100%; display: flex; align-items: center; }
@media (max-width: 991px) {
    .breadcrumb-wrap { margin-top: 83px; min-height: 70px !important; padding: 18px 0 !important; }
}
.breadcrumb-wrap .breadcrumb {
    background: transparent;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.6;
}
.breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: #bbb; }
.breadcrumb-wrap .breadcrumb-item a { color: var(--tz-muted); }
.breadcrumb-wrap .breadcrumb-item a:hover { color: var(--tz-primary); }
.breadcrumb-wrap .breadcrumb-item.active { color: var(--tz-text); font-weight: 600; }

/* ---------- Section Heading ---------- */
.section-heading { margin-bottom: 28px; position: relative; }
.section-heading .title {
    font-size: 22px; font-weight: 800;
    margin: 0; padding-left: 14px;
    border-left: 4px solid var(--tz-primary);
    line-height: 1.2;
}
.section-heading.style-2 .title { font-size: 18px; }

/* ---------- Sidebar Widgets ---------- */
.sidebar-widget { margin-bottom: 40px; }
.sidebar-widget .widget-title {
    font-size: 18px; font-weight: 800;
    margin: 0 0 18px;
    padding-left: 12px;
    border-left: 4px solid var(--tz-primary);
}

.widget-category .category-list { list-style: none; padding: 0; margin: 0; }
.widget-category .category-list li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--tz-border);
    display: flex; justify-content: space-between; align-items: center;
}
.widget-category .category-list li:last-child { border-bottom: none; }
.widget-category .category-list li a { color: var(--tz-text); flex: 1; }
.widget-category .category-list li a:hover { color: var(--tz-primary); }
.widget-category .category-list li .count {
    background: var(--tz-bg-soft);
    color: var(--tz-muted);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.widget-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--tz-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--tz-text);
    transition: all .2s;
    background: #fff;
}
.tag-cloud-link:hover {
    background: var(--tz-primary);
    color: #fff;
    border-color: var(--tz-primary);
    text-decoration: none;
}

.widget-post .post-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px !important;          /* 覆盖 Being 的 padding: 30px */
    margin-bottom: 14px !important;
    background-color: var(--tz-bg-soft);
    border-radius: 12px;
    border-bottom: none;
}
.widget-post .post-box:last-child { margin-bottom: 0 !important; }
.widget-post .post-box .image {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;                   /* 覆盖 Being 的 margin-right: 15px */
    flex-shrink: 0;
    border-radius: 10px !important;
    overflow: hidden;
    background: #fff;
}
.widget-post .post-box .image img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 0 !important;
}
.widget-post .post-box .content {
    flex: 1 !important;
    width: auto !important;                 /* 覆盖 Being 的 width: calc(100% - 150px) */
    min-width: 0;
}
.widget-post .post-box .content h5 {
    font-size: 14px; font-weight: 600; margin: 0 0 6px;
    line-height: 1.4;
}
.widget-post .post-box .content h5 a {
    color: var(--tz-text);
    background-image: none !important;       /* 覆盖 Being 的下划线渐变 */
    display: inline !important;
}
.widget-post .post-box .content h5 a:hover { color: var(--tz-primary); }
.widget-post .post-box .content .meta { color: var(--tz-muted); font-size: 12px; }

/* ---------- Global: category badge left-align ---------- */
/* Override style.css `margin: auto` so .categorie always aligns left.
   align-self: flex-start 防止在 flex-column 容器中被拉伸为全宽 */
.categorie {
    margin: 0 0 10px 0 !important;   /* 左右清零居左；底部留 10px 与标题间距 */
    display: inline-block !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: fit-content;
}

/* ---------- Article (blog-detail) ---------- */
.single-blog-content { padding-right: 16px; }
.single-blog-content .entry-category { margin-bottom: 12px; text-align: left; }
/* Use the same yellow-pill style as .categorie */
.single-blog-content .entry-category a {
    display: inline-block !important;
    background-color: #fee86d;
    color: #333;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    width: auto !important;
    max-width: fit-content;
    transition: background .2s;
}
.single-blog-content .entry-category a:hover {
    background-color: #fdd835;
    color: #111;
}
.single-blog-content .entry-title {
    font-size: 34px; font-weight: 800;
    margin: 14px 0 20px;
    line-height: 1.3;
}
@media (max-width: 767px) {
    .single-blog-content .entry-title { font-size: 24px; }
}
.single-blog-content .entry-meta {
    list-style: none; padding: 0; margin: 0 0 24px;
    display: flex; gap: 20px; flex-wrap: wrap;
    color: var(--tz-muted); font-size: 14px;
}
.single-blog-content .entry-meta li { display: flex; align-items: center; gap: 6px; }
.single-blog-content .entry-meta li i { color: var(--tz-primary); }
.single-blog-content .entry-meta .thumbsUp { cursor: pointer; }

.single-blog-content .featured-image { margin-bottom: 28px; border-radius: var(--tz-radius); overflow: hidden; max-height: 460px; }
.single-blog-content .featured-image img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; }

.entry-content {
    font-size: 16px;
    line-height: 1.85;
    color: #3a3a3a;
}
.entry-content p { margin-bottom: 1.2em; }
.entry-content h2 { font-size: 26px; font-weight: 800; margin: 1.5em 0 .8em; }
.entry-content h3 { font-size: 22px; font-weight: 800; margin: 1.4em 0 .7em; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--tz-radius); margin: 1em 0; }
.entry-content blockquote {
    border-left: 4px solid var(--tz-primary);
    padding: 4px 20px;
    color: var(--tz-muted);
    background: var(--tz-bg-soft);
    margin: 1.2em 0;
    border-radius: 0 var(--tz-radius) var(--tz-radius) 0;
}
.entry-content code {
    background: #f1f1f1; padding: 2px 6px; border-radius: 3px;
    color: #d63384; font-size: 0.92em;
}
.entry-content pre { border-radius: var(--tz-radius); margin: 1.2em 0; }

/* ---------- 富文本 Table ---------- */
/* 外层容器：超宽时横向滚动，防止撑破布局 */
.entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 14px;
}
.entry-content table th,
.entry-content table td {
    border: 1px solid var(--tz-border);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;        /* 单元格内容不强制换行，保持列宽 */
    min-width: 80px;
}
.entry-content table th {
    background: var(--tz-bg-soft);
    font-weight: 700;
    color: var(--tz-text);
}
.entry-content table tr:nth-child(even) td {
    background: #fafaf8;
}
.entry-content table tr:hover td {
    background: #f5f3ee;
}

.tag-share-wrap {
    margin-top: 30px; padding: 24px 0;
    border-top: 1px solid var(--tz-border);
    border-bottom: 1px solid var(--tz-border);
    display: flex; gap: 24px; flex-wrap: wrap;
    align-items: flex-start;
}
.tag-share-wrap .label { font-weight: 700; margin-right: 10px; }
.tag-share-wrap .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Post Navigation (prev/next) ---------- */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 36px 0;
}
.post-navigation .post-box {
    background: var(--tz-bg-soft);
    border-radius: var(--tz-radius);
    padding: 18px;
    display: flex; gap: 14px;
    transition: box-shadow .2s;
}
.post-navigation .post-box:hover { box-shadow: var(--tz-shadow); }
.post-navigation .post-box.next-post { text-align: right; flex-direction: row-reverse; }
.post-navigation .post-box .figure-holder { flex-shrink: 0; width: 70px; height: 70px; border-radius: var(--tz-radius); overflow: hidden; }
.post-navigation .post-box .figure-holder img { width: 100%; height: 100%; object-fit: cover; }
.post-navigation .post-box .content-holder { flex: 1; min-width: 0; }
.post-navigation .post-box .text-box {
    color: var(--tz-muted); font-size: 13px; display: inline-block; margin-bottom: 4px;
}
.post-navigation .post-box .text-box i { margin: 0 4px; }
.post-navigation .post-box .entry-title { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-navigation .post-box .entry-title a { color: var(--tz-text); }
.post-navigation .post-box .entry-title a:hover { color: var(--tz-primary); }

@media (max-width: 767px) {
    .post-navigation { grid-template-columns: 1fr; }
    .post-navigation .post-box.next-post { flex-direction: row; text-align: left; }
}

/* ---------- Related Posts Slider — 等高卡片 ---------- */
/* OWL Carousel 默认 .owl-item 是 block，不等高。
   把 .owl-stage 改为 flex 容器，让同一行的 .owl-item 互相拉伸至等高 */
#relatedSlider .owl-stage {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
}
#relatedSlider .owl-item {
    display: flex !important;
    flex-direction: column;
}
#relatedSlider .single-slide {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
}
#relatedSlider .spotlight-card {
    flex: 1;          /* 撑满 .single-slide 高度，保证与最高卡等高 */
}

/* ---------- Related Posts Slider Nav ---------- */
#relatedSlider.owl-carousel { margin-bottom: 0; }
#relatedSlider .owl-nav {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 12px;
}
#relatedSlider .owl-nav .owl-prev,
#relatedSlider .owl-nav .owl-next {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff !important;
    border: 1.5px solid var(--tz-border) !important;
    color: var(--tz-text) !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    line-height: 1;
}
#relatedSlider .owl-nav .owl-prev:hover,
#relatedSlider .owl-nav .owl-next:hover {
    background: var(--tz-primary) !important;
    border-color: var(--tz-primary) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.13);
}
#relatedSlider .owl-nav .owl-prev.disabled,
#relatedSlider .owl-nav .owl-next.disabled {
    opacity: .35;
    pointer-events: none;
}

/* ---------- Comments ---------- */
.post-comment, .leave-comment { margin-top: 40px; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list > li { margin-bottom: 24px; }
.each-comment {
    display: flex; gap: 14px;
    padding: 18px;
    background: var(--tz-bg-soft);
    border-radius: var(--tz-radius);
}
.comment-figure { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.comment-figure img { width: 100%; height: 100%; object-fit: cover; }
.comment-content { flex: 1; min-width: 0; }
.comment-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.comment-meta { color: var(--tz-muted); font-size: 12px; margin-bottom: 10px; }
.comment-comment { margin: 0 0 10px; line-height: 1.7; }
.item-btn.reply {
    font-size: 13px; color: var(--tz-primary); font-weight: 600;
    cursor: pointer;
}
.comment-list .children { list-style: none; padding-left: 32px; margin-top: 16px; }

.leave-form-box .form-control {
    border: 1px solid var(--tz-border);
    border-radius: var(--tz-radius);
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 14px;
}
.leave-form-box .form-control:focus {
    border-color: var(--tz-primary);
    box-shadow: 0 0 0 .2rem rgba(255, 122, 89, .12);
}
.leave-form-box .submit-btn {
    background: var(--tz-primary); color: #fff;
    border: none; padding: 12px 28px;
    border-radius: var(--tz-radius); font-weight: 700;
    cursor: pointer;
}
.leave-form-box .submit-btn:hover { opacity: .9; }
.admin-captcha { border-radius: var(--tz-radius); border: 1px solid var(--tz-border); cursor: pointer; }

/* ---------- Pagination ---------- */
.template-pagination { margin-top: 30px; }
.template-pagination ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.template-pagination li a,
.template-pagination li span {
    display: inline-block;
    min-width: 42px; height: 42px;
    line-height: 40px; text-align: center;
    border: 1px solid var(--tz-border);
    border-radius: var(--tz-radius);
    color: var(--tz-text);
    padding: 0 14px;
    transition: all .2s;
}
.template-pagination li.selected a,
.template-pagination li.selected span,
.template-pagination li a:hover {
    background: var(--tz-primary); color: #fff;
    border-color: var(--tz-primary);
    text-decoration: none;
}
.template-pagination li.disabled span {
    color: #ccc; background: #fafafa; cursor: not-allowed;
}

/* ---------- Cookie Notice ---------- */
.cookie-notice {
    position: fixed; bottom: 20px; right: 20px;
    width: 360px; max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.15);
    padding: 20px;
    z-index: 1050;
    border: 1px solid var(--tz-border);
}
.cookie-notice-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 15px; margin-bottom: 10px;
}
.cookie-notice-title i { color: var(--tz-primary); }
.cookie-notice-body p { font-size: 13px; color: var(--tz-muted); margin: 0 0 14px; line-height: 1.7; }
.cookie-notice-link { color: var(--tz-primary); font-weight: 600; margin-left: 4px; }
.cookie-notice-accept {
    background: var(--tz-primary); color: #fff;
    border: none; padding: 8px 22px;
    border-radius: var(--tz-radius); font-weight: 600;
    cursor: pointer; font-size: 13px;
}

/* ---------- Search Overlay ---------- */
.search-overlay {
    position: fixed; inset: 0;
    background: rgba(20,20,20,.92);
    display: none;
    align-items: center; justify-content: center;
    z-index: 1060;
}
.search-overlay.is-active { display: flex; }
.search-overlay .search-close {
    position: absolute; top: 30px; right: 30px;
    background: transparent; border: none;
    color: #fff; font-size: 24px; cursor: pointer;
}
.search-overlay .search-form {
    display: flex; gap: 0;
    width: 600px; max-width: 90%;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
}
.search-overlay .search-form input[type="search"] {
    flex: 1; border: none; padding: 18px 24px; font-size: 16px;
    outline: none;
}
.search-overlay .search-btn {
    background: var(--tz-primary); color: #fff;
    border: none; padding: 0 28px;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-weight: 600;
}

/* ---------- Footer ---------- */
.site-footer {
    background: #1c1c1c;
    color: #c4c4c4;
    padding: 60px 0 0;
    margin-top: 80px;
}
.site-footer .footer-widget { margin-bottom: 30px; }
.site-footer .footer-logo img { max-width: 140px; margin-bottom: 18px; }
.site-footer .footer-desc { font-size: 14px; line-height: 1.7; color: #a8a8a8; }
.site-footer .footer-contact-label {
    font-weight: 700; color: #fff;
    margin: 20px 0 6px;
    font-size: 14px;
}
.site-footer .footer-contact-mail { font-size: 14px; color: #a8a8a8; }
.site-footer .footer-contact-mail i { margin-right: 6px; color: var(--tz-primary); }
.site-footer .footer-title {
    color: #fff; font-size: 16px; font-weight: 700;
    margin-bottom: 18px;
}
.site-footer .footer-list { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-list li { padding: 5px 0; }
.site-footer .footer-list a { color: #a8a8a8; font-size: 14px; }
.site-footer .footer-list a:hover { color: var(--tz-primary); }

.site-footer .footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer .footer-social-qr {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: 6px; background: #fff; padding: 4px;
}

.site-footer .footer-links {
    border-top: 1px solid #2c2c2c;
    padding: 18px 0;
    font-size: 13px;
    color: #888;
}
.site-footer .footer-links-label { font-weight: 600; margin-right: 8px; color: #a8a8a8; }
.site-footer .footer-links-list a { color: #888; margin-right: 16px; }
.site-footer .footer-links-list a:hover { color: var(--tz-primary); }

.site-footer .footer-bottom {
    border-top: 1px solid #2c2c2c;
    padding: 20px 0;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    font-size: 13px;
}
.site-footer .footer-bottom a { color: var(--tz-primary); }
.site-footer .footer-bottom .divider { margin: 0 6px; color: #555; }
/* Back-to-top: 固定悬浮在右下角，滚动超 250px 后由 app.js fadeIn 显示 */
.site-footer .back-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 999;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tz-primary);
    color: #fff;
    display: none;                  /* app.js 控制显隐，初始隐藏 */
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 4px 16px rgba(255, 122, 89, .45);
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
}
.site-footer .back-top i {
    display: block !important;
    line-height: 1;
    opacity: 1 !important;
    color: #fff !important;
    visibility: visible !important;
}
.site-footer .back-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 122, 89, .5);
    color: #fff;
    text-decoration: none;
}

/* ---------- Error pages ---------- */
.error-wrap {
    text-align: center;
    padding: 80px 0;
}
.error-wrap .error-image { max-width: 380px; margin: 0 auto 30px; }
.error-wrap .error-image img { width: 100%; height: auto; display: block; }
.error-wrap .error-title { font-size: 28px; font-weight: 800; margin-bottom: 14px; }
.error-wrap .error-code { font-size: 15px; color: var(--tz-muted); margin-bottom: 28px; }
.error-wrap .error-code .code-num { color: var(--tz-primary); font-weight: 700; }
.error-wrap .back-home-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tz-primary); color: #fff;
    padding: 12px 28px; border-radius: 30px;
    font-weight: 600;
}
.error-wrap .back-home-btn:hover { color: #fff; opacity: .9; text-decoration: none; }

/* ---------- Person Center ---------- */
.person-profile {
    background: var(--tz-bg-soft);
    border-radius: var(--tz-radius);
    padding: 36px 30px;
    text-align: center;
    margin-bottom: 36px;
}
.person-profile .avatar {
    width: 110px; height: 110px; border-radius: 50%;
    margin: 0 auto 18px;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: var(--tz-shadow);
}
.person-profile .avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-profile .name { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.person-profile .desc { color: var(--tz-muted); margin: 0 0 16px; font-size: 14px; line-height: 1.7; max-width: 520px; margin-left: auto; margin-right: auto; }
.person-profile .stat-row {
    display: flex; justify-content: center; gap: 36px; margin-top: 18px;
    flex-wrap: wrap;
}
.person-profile .stat-row .stat-item { text-align: center; }
.person-profile .stat-row .num { font-size: 22px; font-weight: 800; color: var(--tz-primary); display: block; }
.person-profile .stat-row .label { font-size: 12px; color: var(--tz-muted); }

.person-articles .empty {
    text-align: center; padding: 60px 0; color: var(--tz-muted);
}
.person-articles .empty i { font-size: 48px; color: #ddd; margin-bottom: 14px; }

/* ---------- Index page extras ---------- */
.hero {
    height: auto !important;
    min-height: calc(100vh - 128px);
    padding-top: 158px;
    padding-bottom: 90px;
    background: var(--tz-bg-soft);
}
.hero-3 { background: var(--tz-bg-soft) !important; }
.hero-3 .image img {
    border-radius: 50% !important;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.hero-3 .post h3 { font-size: 36px; line-height: 1.3; margin-bottom: 16px; }
.hero-3 .post h3 a { color: var(--tz-text); background-image: none !important; display: inline !important; }
.hero-3 .post h3 a:hover { color: var(--tz-primary); }
.hero-3 .post p { color: var(--tz-muted); font-size: 16px; line-height: 1.7; }
.hero-3 .post .info img {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important; object-fit: cover;
}

/* nav buttons — 完全复用 Being .hero-carousel 默认（圆形 40×40，position:absolute，
   左右贴边），只把字体权重补成 900 以渲染 FA5 Solid 字形 */
.hero-carousel .owl-nav .owl-prev:after,
.hero-carousel .owl-nav .owl-next:after,
.hero-carousel-3 .owl-nav .owl-prev:after,
.hero-carousel-3 .owl-nav .owl-next:after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
}

@media (max-width: 991px) {
    /* navbar 移动端高度 ≈ 16+36+16+1 = 69~80px，hero 用 margin-top 精确避让 */
    /* padding-bottom 留 80px：owl-nav 用 -55px 沉到 owl-carousel 下方、落入 hero padding 区，按钮和文章内容不重叠 */
    .hero { margin-top: 80px; padding-top: 30px !important; padding-bottom: 80px !important; min-height: 0; }
    .hero-3 .post h3 { font-size: 26px; }
    .hero-3 .image { padding: 0 30px 20px; }
    .hero-carousel-3 .owl-nav,
    .hero-carousel .owl-nav { bottom: -55px !important; }
}
@media (max-width: 576px) {
    .hero { margin-top: 70px; padding-top: 24px !important; padding-bottom: 75px !important; }
    .hero-carousel-3 .owl-nav,
    .hero-carousel .owl-nav { bottom: -55px !important; }
}

/* ---------- Hot Tags Strip (replaces categories visual strip) ---------- */
.hot-tags-strip {
    padding: 28px 0;
    border-bottom: 1px solid var(--tz-border);
}
.hot-tags-strip .hot-tags-inner {
    display: flex; align-items: center; gap: 20px;
}
.hot-tags-strip .hot-tags-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--tz-text);
    flex-shrink: 0;
}
.hot-tags-strip .hot-tags-label i { color: var(--tz-primary); }
.hot-tags-strip .hot-tags-track {
    flex: 1; display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.hot-tags-strip .hot-tags-track::-webkit-scrollbar { height: 4px; }
.hot-tags-strip .hot-tags-track::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.hot-tag-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--tz-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--tz-text);
    white-space: nowrap;
    transition: all .2s;
    flex-shrink: 0;
}
.hot-tag-pill small {
    color: var(--tz-muted); font-size: 11px;
    background: var(--tz-bg-soft);
    padding: 1px 6px;
    border-radius: 8px;
}
.hot-tag-pill:hover {
    background: var(--tz-primary); color: #fff; text-decoration: none;
    border-color: var(--tz-primary);
}
.hot-tag-pill:hover small {
    background: rgba(255,255,255,.25); color: #fff;
}
body.dark-theme .hot-tag-pill { background: #232323; color: #d0d0d0; border-color: #333; }
body.dark-theme .hot-tag-pill small { background: #2a2a2a; color: #999; }
body.dark-theme .hot-tags-strip .hot-tags-label { color: #e0e0e0; }

/* TopArea cards / hot post card */
.spotlight-card {
    background: var(--tz-bg-card);
    border-radius: var(--tz-radius);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
    display: flex; flex-direction: column;
}
.spotlight-card:hover { transform: translateY(-4px); box-shadow: var(--tz-shadow); }
.spotlight-card .image { aspect-ratio: 16/10; overflow: hidden; }
.spotlight-card .image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.spotlight-card:hover .image img { transform: scale(1.04); }
.spotlight-card .content { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.spotlight-card .categorie { font-size: 12px; font-weight: 600; color: #333; }
/* h5 自然高度，meta 用 margin-top:auto 顶到底部；line-clamp 兜底防响应式撑高 */
.spotlight-card h5 {
    font-size: 16px; font-weight: 700; margin: 8px 0 12px; line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spotlight-card h5 a { color: var(--tz-text); }
.spotlight-card h5 a:hover { color: var(--tz-primary); }
.spotlight-card .meta { font-size: 12px; color: var(--tz-muted); display: flex; gap: 12px; margin-top: auto !important; padding-top: 8px; }
.spotlight-card .meta li { display: inline-flex; align-items: center; gap: 4px; }
.spotlight-card .meta i { color: var(--tz-primary); }

/* Hot stories big card */
/* hot-feature：高度跟随右侧 compact-list 自适应，移除固定 aspect-ratio */
.hot-feature {
    position: relative; border-radius: var(--tz-radius); overflow: hidden;
    height: 100%;
    min-height: 300px;   /* 数据极少时的兜底最小高度 */
}
/* 父行需要 align-items:stretch，让左右列等高 */
.hot-feature-row { align-items: stretch; }
.hot-feature-row > [class*="col-"] { display: flex; flex-direction: column; }
.hot-feature-row .hot-feature { flex: 1; }
.hot-feature-row .compact-list-wrap { flex: 1; }
.hot-feature .image { position: absolute; inset: 0; }
.hot-feature .image img { width: 100%; height: 100%; object-fit: cover; }
.hot-feature .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 60%);
    padding: 24px;
    display: flex; flex-direction: column; justify-content: flex-end;
    color: #fff;
}
.hot-feature .overlay .categorie {
    align-self: flex-start;
    background: var(--tz-primary); color: #fff;
    padding: 3px 10px; border-radius: 3px; font-size: 12px; font-weight: 600;
    margin-bottom: 10px;
}
.hot-feature .overlay h3 { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 0 0 10px; }
.hot-feature .overlay h3 a { color: #fff; }
.hot-feature .overlay .meta { display: flex; gap: 14px; font-size: 13px; color: #ddd; }
.hot-feature .overlay .meta li { display: inline-flex; align-items: center; gap: 4px; }

/* Compact list (right column) */
.compact-list .nav-tabs {
    border-bottom: 1px solid var(--tz-border);
    margin-bottom: 16px;
}
.compact-list .nav-tabs .nav-link {
    color: var(--tz-muted); border: none;
    font-size: 14px; font-weight: 600;
    padding: 10px 0; margin-right: 22px;
}
.compact-list .nav-tabs .nav-link.active {
    color: var(--tz-text); background: transparent;
    border-bottom: 2px solid var(--tz-primary);
}
.compact-list .item {
    display: flex; gap: 12px; padding: 12px 0;
    border-bottom: 1px dashed var(--tz-border);
}
.compact-list .item:last-child { border-bottom: none; }
.compact-list .item .image { width: 72px; height: 56px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.compact-list .item .image img { width: 100%; height: 100%; object-fit: cover; }
.compact-list .item .text { flex: 1; min-width: 0; }
.compact-list .item .text h6 { font-size: 14px; font-weight: 600; margin: 0 0 6px; line-height: 1.5; }
.compact-list .item .text h6 a { color: var(--tz-text); }
.compact-list .item .text h6 a:hover { color: var(--tz-primary); }
.compact-list .item .text .meta { font-size: 12px; color: var(--tz-muted); }

/* Spotlight cards (Trending + Related) - kill Being's 50% on images */
.spotlight-card .image img,
.pick-column .image img,
.pick-column .more-items .item .image img,
.compact-list .item .image img,
.hot-feature .image img,
.post-navigation .figure-holder img { border-radius: 0 !important; }
.post-navigation .figure-holder { background: var(--tz-bg-soft); }

/* Placeholder fallback for missing article image */
.image-placeholder,
.image > .image-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f4ede5 0%, #f0e4d3 100%);
    color: #c8b89a; font-size: 28px;
}
img.has-fallback { transition: opacity .2s; }
img.has-fallback:not([src]), img.has-fallback[src=""] { display: none; }

/* List view (blog list, no thumbnail-only) */
.post-list .image { border-radius: var(--tz-radius); overflow: hidden; }

/* Blog list row card (used on blog.html list page) */
.post-row {
    display: flex;
    gap: 24px;
    background: var(--tz-bg-card);
    border-radius: var(--tz-radius);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.04);
    transition: transform .25s, box-shadow .25s;
    padding: 16px;
}
.post-row:hover { transform: translateY(-2px); box-shadow: var(--tz-shadow); }
.post-row .image {
    width: 220px; flex-shrink: 0; aspect-ratio: 4/3;
    border-radius: var(--tz-radius); overflow: hidden;
    background: var(--tz-bg-soft);
}
.post-row .image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; border-radius: 0 !important; }
.post-row:hover .image img { transform: scale(1.04); }
.post-row .content { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.post-row .content .categorie {
    align-self: flex-start !important;
    margin: 0 0 8px 0 !important;        /* 覆盖 Being 的 margin: auto 居中 */
    font-size: 12px; font-weight: 600;
    color: #333;
}
.post-row .content h5 {
    font-size: 18px; font-weight: 700; line-height: 1.4;
    margin: 0 0 10px;
}
.post-row .content h5 a { color: var(--tz-text); }
.post-row .content h5 a:hover { color: var(--tz-primary); }
.post-row .content .excerpt {
    color: var(--tz-muted); font-size: 14px; line-height: 1.7;
    margin: 0 0 12px;
}
.post-row .content .meta ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.post-row .content .meta li { font-size: 13px; color: var(--tz-muted); display: inline-flex; align-items: center; gap: 4px; }
.post-row .content .meta li.dot {
    width: 4px; height: 4px; background: #ccc; border-radius: 50%; align-self: center;
}
.post-row-readmore {
    color: var(--tz-primary); font-size: 14px; font-weight: 600;
    margin-top: auto;
}
.post-row-readmore:hover { color: var(--tz-primary); text-decoration: underline; }

@media (max-width: 767px) {
    .post-row { flex-direction: column; }
    .post-row .image { width: 100%; }
}

body.dark-theme .post-row { background: #232323; }
body.dark-theme .post-row .content h5 a { color: #e0e0e0; }

/* Editor's pick column card */
.pick-column {
    background: var(--tz-bg-card);
    border-radius: var(--tz-radius);
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
    height: 100%;
}
.pick-column .lead { margin-bottom: 18px; }
.pick-column .lead .image { aspect-ratio: 16/10; border-radius: var(--tz-radius); overflow: hidden; margin-bottom: 12px; }
.pick-column .lead .image img { width: 100%; height: 100%; object-fit: cover; }
.pick-column .lead .categorie { color: #333; font-weight: 600; font-size: 12px; margin-bottom: 8px !important; }
.pick-column .lead h5 { font-size: 16px; font-weight: 700; margin: 6px 0 8px; line-height: 1.4; }
.pick-column .lead h5 a { color: var(--tz-text); }
.pick-column .lead h5 a:hover { color: var(--tz-primary); }
.pick-column .lead .meta { font-size: 12px; color: var(--tz-muted); }
.pick-column .more-items .item {
    display: flex; gap: 12px; padding: 10px 0;
    border-top: 1px dashed var(--tz-border);
}
.pick-column .more-items .item .image { width: 70px; height: 56px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.pick-column .more-items .item .image img { width: 100%; height: 100%; object-fit: cover; }
.pick-column .more-items .item .text { flex: 1; min-width: 0; }
.pick-column .more-items .item .text h6 { font-size: 13px; font-weight: 600; margin: 0 0 4px; line-height: 1.4; }
.pick-column .more-items .item .text h6 a { color: var(--tz-text); }
.pick-column .more-items .item .text h6 a:hover { color: var(--tz-primary); }
.pick-column .more-items .item .text .meta { font-size: 11px; color: var(--tz-muted); }

/* ============================================================
 *  Dark mode tweaks (与 switch.js 联动)
 * ============================================================ */
body.dark-theme {
    background: #121212;
    color: #e0e0e0;
    /* 重定义所有 CSS 变量，让所有使用 var(--tz-xxx) 的元素自动适配暗色 */
    --tz-text: #e0e0e0;
    --tz-muted: #9a9a9a;
    --tz-border: #2a2a2a;
    --tz-bg-soft: #1a1a1a;
    --tz-shadow: 0 8px 22px rgba(0,0,0,.4);
}
body.dark-theme,
body.dark-theme .hero,
body.dark-theme .person-profile,
body.dark-theme .each-comment {
    background-color: #1d1d1d;
    color: #e0e0e0;
}
/* breadcrumb 单独提亮 + 加底边线，确保和 body 有明确视觉分隔 */
body.dark-theme .breadcrumb-wrap {
    background-color: #262626 !important;
    border-bottom: 1px solid #333;
    color: #e0e0e0;
}
body.dark-theme .breadcrumb-wrap .breadcrumb-item a { color: #b0b0b0; }
body.dark-theme .breadcrumb-wrap .breadcrumb-item.active { color: #ffffff; }
body.dark-theme .breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before { color: #666; }
body.dark-theme .spotlight-card,
body.dark-theme .pick-column,
body.dark-theme .cookie-notice {
    background: #232323;
    box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
body.dark-theme .spotlight-card h5 a,
body.dark-theme .pick-column h5 a,
body.dark-theme .pick-column .lead h5 a,
body.dark-theme .pick-column .more-items h6 a,
body.dark-theme .widget-post h5 a,
body.dark-theme .widget-category li a,
body.dark-theme .compact-list h6 a,
body.dark-theme .single-blog-content .entry-title,
body.dark-theme .post-navigation .entry-title a,
body.dark-theme .comment-title,
body.dark-theme .breadcrumb-item.active,
body.dark-theme .section-heading .title,
body.dark-theme .sidebar-widget .widget-title,
body.dark-theme .person-profile .name {
    color: #e0e0e0;
}
body.dark-theme .entry-content { color: #c8c8c8; }
body.dark-theme .tag-cloud-link {
    background: #2a2a2a; color: #ccc; border-color: #333;
}
body.dark-theme .tag-cloud-link:hover { background: var(--tz-primary); color: #fff; }
body.dark-theme .widget-category .category-list li { border-color: #2a2a2a; }
body.dark-theme .widget-category .category-list li .count { background: #2a2a2a; color: #aaa; }
body.dark-theme .leave-form-box .form-control {
    background: #2a2a2a; border-color: #333; color: #e0e0e0;
}
body.dark-theme .template-pagination li a,
body.dark-theme .template-pagination li span {
    background: #232323; border-color: #333; color: #ccc;
}
/* ---------- post-round (2-col card) title clamp ---------- */
.post-round .content h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.dark-theme .topbar { background: #0c0c0c; }
body.dark-theme .navbar { background: #1a1a1a !important; }
body.dark-theme .navbar .nav-link { color: #e0e0e0 !important; }
body.dark-theme .navbar .dropdown-menu { background: #232323; }
body.dark-theme .navbar .dropdown-item { color: #ccc; }
body.dark-theme .navbar .dropdown-item:hover { background: #2a2a2a; }

/* 暗色模式下 Bootstrap text-muted（评论提示 + 任何 .text-muted 文字）颜色覆盖 */
body.dark-theme .text-muted,
body.dark .text-muted { color: #aaa !important; }
/* 评论表单标题 */
body.dark-theme .leave-comment .section-heading .title,
body.dark-theme .comments-area .title { color: #e0e0e0; }