/* ============================================================
   博客页面 — 专用样式 (tech-blog.css)
   列表页：简洁白色设计，匹配 blog.html
   详情页：保留原有深色科技主题
   尺寸约定：1rem ≈ 100px @1920px
   ============================================================ */

/* ── 变量 ── */
:root {
    --tb-deep: #00263e;
    --tb-mid: #0e4d7a;
    --tb-blue: #5BC2E7;
    --tb-blue-rgb: 91, 194, 231;
    --tb-text: #00263e;
    --tb-text-light: #4a6a80;
    --tb-bg: #ffffff;
    --tb-bg-section: #f8f9fc;
    --tb-card-bg: #ffffff;
    --tb-border: #e3eff3;
    --tb-radius: 6px;
    --tb-shadow: 0 8px 24px rgba(14,76,96,.07);
    --tb-shadow-hover: 0 18px 55px rgba(19,88,112,.12);
}

/* ── 主容器基础样式 ── */
.tech-blog-main {
    background: var(--tb-bg);
    position: relative;
    z-index: 2;
}
.tech-blog-detail-main {
    background: var(--tb-bg-section);
    position: relative;
    z-index: 2;
}

/* ── 容器 ── */
.tbd-container {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

/* ============================================================
   列表页 — Hero 区域 (白色背景, 30/70 分割)
   ============================================================ */
.tbd-hero {
    background: #fff;
    padding: 0.24rem 0 0.30rem;
}

.tbd-crumb {
    font-size: 0.12rem;
    color: #7e969f;
    margin-bottom: 0.18rem;
}
.tbd-crumb a {
    color: var(--tb-deep);
    text-decoration: none;
    transition: color 0.2s;
}
.tbd-crumb a:hover {
    color: var(--tb-blue);
}
.tbd-crumb b {
    color: #2486a8;
}

.tbd-hero-grid {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 0;
}

/* 左侧文字 */
.tbd-hero-copy {
    position: relative;
    overflow: hidden;
    min-height: 4.30rem;
    border-radius: var(--tb-radius);
    padding: 0.52rem 0.30rem 0.52rem 0.48rem;
    background: linear-gradient(135deg, #e8faff 0%, #b9e8f5 48%, #dff6fc 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tbd-hero-copy::before,
.tbd-hero-copy::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}
.tbd-hero-copy::before {
    width: 3.60rem;
    height: 3.60rem;
    right: -1.80rem;
    top: -1.70rem;
}
.tbd-hero-copy::after {
    width: 2.20rem;
    height: 2.20rem;
    left: -1.10rem;
    bottom: -1.25rem;
}

.tbd-pill {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.07rem 0.12rem;
    border-radius: var(--tb-radius);
    background: #eef9fc;
    border: 1px solid #d8edf3;
    font-size: 0.11rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 800;
    color: #2584a2;
    margin-bottom: 0.18rem;
}

.tbd-hero-title {
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    color: #092f46;
    line-height: 1.01;
    margin: 0 0 0.18rem;
}

.tbd-hero-subtitle {
    display: block;
    color: var(--tb-blue);
    font-size: 0.72em;
    line-height: 1.05;
    margin-top: 0.07rem;
    font-weight: 600;
}

.tbd-hero-desc {
    color: #5c7580;
    font-size: 0.14rem;
    line-height: 1.6;
    margin: 0 0 0.28rem;
}

.tbd-actions {
    display: flex;
    gap: 0.12rem;
}

.tbd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.13rem 0.19rem;
    border-radius: var(--tb-radius);
    font-size: 0.14rem;
    font-weight: 750;
    text-decoration: none;
    transition: all 0.2s;
}
.tbd-btn:hover {
    transform: translateY(-2px);
}
.tbd-btn-white {
    background: #fff;
    color: #177391;
    box-shadow: 0 10px 25px rgba(23,115,145,.1);
}
.tbd-btn-dark {
    background: #0a3346;
    color: #fff;
}

/* 右侧精选文章卡片 */
.tbd-featured {
    position: relative;
    min-height: 4.30rem;
    border-radius: var(--tb-radius);
    overflow: hidden;
    background: #15556d;
    box-shadow: 0 14px 40px rgba(7,54,75,.18);
    display: block;
    text-decoration: none;
    color: inherit;
}
.tbd-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.95);
}
.tbd-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,43,58,.03) 35%, rgba(5,43,58,.9) 100%);
}
.tbd-featured-content {
    position: absolute;
    left: 0.32rem;
    right: 0.32rem;
    bottom: 0.30rem;
    z-index: 2;
    color: #fff;
}
.tbd-featured-date {
    font-size: 0.11rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    opacity: 0.75;
    font-weight: 800;
}
.tbd-featured-content h2 {
    font-size: 0.27rem;
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin: 0.09rem 0 0.08rem;
    color: #fff;
}
.tbd-featured-content p {
    font-size: 0.13rem;
    color: rgba(255,255,255,.8);
    margin: 0;
    max-width: 6.10rem;
}
.tbd-circle-arrow {
    position: absolute;
    z-index: 3;
    right: 0.26rem;
    top: 0.26rem;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #fff;
    color: #176f8e;
    display: grid;
    place-items: center;
    font-size: 0.20rem;
    text-decoration: none;
}

/* ============================================================
   列表页 — 文章区域
   ============================================================ */
.tbd-section {
    padding: 0.58rem 0;
}

.tbd-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.30rem;
    margin-bottom: 0.28rem;
}
.tbd-section-head .tbd-kicker {
    font-size: 0.11rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 800;
    color: #2584a2;
    margin-bottom: 0.06rem;
}
.tbd-section-head h2 {
    font-size: 0.42rem;
    letter-spacing: -0.045em;
    margin: 0.06rem 0 0;
    color: var(--tb-text);
}
.tbd-section-head p {
    max-width: 5.10rem;
    color: #6f8791;
    font-size: 0.14rem;
    margin: 0;
}

/* 搜索栏 */
.tbd-article-toolbar {
    max-width: 7.60rem;
    margin: 0 0 0.24rem auto;
}
.tbd-article-search {
    height: 0.50rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.10rem;
    background: #f7fbfc;
    border-radius: var(--tb-radius);
    padding: 0 0.09rem 0 0.16rem;
}
.tbd-article-search span {
    font-size: 0.22rem;
    color: #71929d;
}
.tbd-article-search input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    color: var(--tb-text);
    font: inherit;
    font-size: 0.14rem;
}
.tbd-article-search input::placeholder {
    color: #8aa0a9;
}
.tbd-search-clear {
    border: 0;
    background: #edf8fb;
    color: #237a97;
    border-radius: var(--tb-radius);
    padding: 0.08rem 0.12rem;
    font-size: 0.11rem;
    cursor: pointer;
    text-decoration: none;
}

/* 文章卡片网格 */
.tbd-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.18rem;
}

.tbd-card {
    background: #fff;
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius);
    overflow: hidden;
    box-shadow: var(--tb-shadow);
    transition: all 0.25s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.tbd-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tb-shadow-hover);
}

.tbd-card-img {
    height: 2.18rem;
    position: relative;
    overflow: hidden;
    background: #cceef6;
}
.tbd-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s;
}
.tbd-card:hover .tbd-card-img img {
    transform: scale(1.045);
}

.tbd-card-body {
    padding: 0.22rem;
    flex: 1;
}

.tbd-meta {
    font-size: 0.11rem;
    color: #8aa0a9;
    margin-bottom: 0.10rem;
}

.tbd-card-body h3 {
    font-size: 0.20rem;
    line-height: 1.3;
    letter-spacing: -0.025em;
    margin: 0 0 0.11rem;
    color: var(--tb-text);
}

.tbd-card-body p {
    font-size: 0.13rem;
    color: #71868f;
    margin: 0 0 0.18rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tbd-read {
    font-size: 0.13rem;
    color: #16779a;
    font-weight: 800;
}

/* 空状态 */
.tbd-empty {
    text-align: center;
    padding: 0.80rem 0;
    color: #6f8791;
    font-size: 0.15rem;
    grid-column: 1 / -1;
}

/* Read More 按钮 */
.tbd-read-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.30rem;
}
.tbd-read-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.30rem;
    padding: 0.12rem 0.24rem;
    border-radius: var(--tb-radius);
    background: #0a3346;
    color: #fff;
    font-size: 0.13rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}
.tbd-read-more-btn:hover {
    background: #237a97;
    transform: translateY(-2px);
}

/* 分页 */
.tbd-pagination {
    margin-top: 0.40rem;
    display: flex;
    justify-content: center;
}
.tbd-pagination .pagination {
    display: flex;
    gap: 0.06rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.tbd-pagination .pagination li a,
.tbd-pagination .pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0.38rem;
    height: 0.38rem;
    padding: 0 0.08rem;
    border: 0.01rem solid var(--tb-border);
    border-radius: 0.06rem;
    font-size: 0.12rem;
    color: var(--tb-text-light);
    text-decoration: none;
    background: var(--tb-card-bg);
    transition: all 0.3s;
}
.tbd-pagination .pagination li a:hover {
    border-color: var(--tb-blue);
    color: var(--tb-blue);
    background: rgba(91,194,231,0.04);
}
.tbd-pagination .pagination li.active span {
    color: #fff;
    background: var(--tb-blue);
    border-color: var(--tb-blue);
    box-shadow: 0 0.02rem 0.12rem rgba(91,194,231,0.3);
    font-weight: 700;
}

/* ============================================================
   详情页 — 阅读进度条
   ============================================================ */
.tb-progress-bar {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 0.03rem;
    background: rgba(91, 194, 231, 0.1);
    z-index: 9999;
}
.tb-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--tb-blue), var(--tb-deep));
    transition: width 0.1s linear;
    border-radius: 0 0.02rem 0.02rem 0;
    box-shadow: 0 0 0.08rem rgba(91, 194, 231, 0.4);
}

/* ============================================================
   详情页 — Hero
   ============================================================ */
.tb-detail-hero {
    position: relative;
    padding: 1.00rem 0 0.50rem;
    background: linear-gradient(135deg, var(--tb-deep) 0%, #0a3a5c 50%, var(--tb-mid) 100%);
    overflow: hidden;
}

/* Hero 装饰元素 */
.tb-detail-hero::before {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(91, 194, 231, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.tb-detail-hero::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(91, 194, 231, 0.08);
    border-radius: 50%;
    pointer-events: none;
}
.tb-detail-hero-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 80%, rgba(91, 194, 231, 0.06) 0%, transparent 60%);
}
.tb-detail-hero-particles {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
}
.tb-detail-hero .container {
    position: relative; z-index: 2;
}
.tb-detail-breadcrumb { margin-bottom: 0.25rem; }
.tb-detail-breadcrumb a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.13rem;
    transition: color 0.3s;
}
.tb-detail-breadcrumb a:hover { color: var(--tb-blue); }
.tb-detail-breadcrumb span {
    color: rgba(255,255,255,0.3);
    margin: 0 0.06rem;
    font-size: 0.12rem;
}
.tb-detail-title {
    color: #fff;
    font-size: 0.42rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
    max-width: 8.00rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.tb-detail-meta {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    flex-wrap: wrap;
}
.tb-detail-author {
    display: flex;
    align-items: center;
    gap: 0.08rem;
}
.tb-detail-author-avatar {
    width: 0.32rem; height: 0.32rem;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(91, 194, 231, 0.15);
}
.tb-detail-author-avatar svg { width: 100%; height: 100%; }
.tb-detail-author-name {
    color: rgba(255,255,255,0.8);
    font-size: 0.14rem;
    font-weight: 500;
}
.tb-detail-sep { color: rgba(255,255,255,0.2); font-size: 0.13rem; }
.tb-detail-date,
.tb-detail-read-time { color: rgba(255,255,255,0.5); font-size: 0.13rem; }

/* ============================================================
   详情页 — 双栏布局
   ============================================================ */
.tb-detail-content-section {
    padding: 0.50rem 0 0.60rem;
    background: #ffffff;
}
.tb-detail-layout {
    display: grid;
    grid-template-columns: 1fr 3.00rem;
    gap: 0.50rem;
    align-items: start;
}

/* 正文排版 */
.tb-detail-editor {
    font-size: 0.16rem;
    line-height: 1.8;
    color: #2c3e50;
}

.tb-detail-editor h2 {
    position: relative;
    font-size: 0.28rem;
    font-weight: 600;
    color: var(--tb-text);
    margin: 0.50rem 0 0.24rem;
    padding-left: 0.16rem;
    line-height: 1.4;
}
.tb-detail-editor h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.08rem;
    width: 0.04rem;
    height: 0.24rem;
    background: linear-gradient(180deg, var(--tb-blue), transparent);
}

.tb-detail-editor h3 {
    position: relative;
    font-size: 0.22rem;
    font-weight: 600;
    color: var(--tb-text);
    margin: 0.40rem 0 0.18rem;
    padding-left: 0.14rem;
    line-height: 1.4;
}
.tb-detail-editor h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.06rem;
    width: 0.03rem;
    height: 0.18rem;
    background: linear-gradient(180deg, var(--tb-blue), rgba(91,194,231,0.3));
}

.tb-detail-editor p { margin: 0 0 0.20rem; }

.tb-detail-editor img {
    max-width: 100%;
    border-radius: 0.12rem;
    margin: 0.30rem 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}
.tb-detail-editor img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.tb-detail-editor blockquote {
    margin: 0.30rem 0;
    padding: 0.20rem 0.28rem;
    background: #ffffff;
    border-left: 0.04rem solid var(--tb-blue);
    border-radius: 0 0.12rem 0.12rem 0;
    color: #555;
    font-style: italic;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.tb-detail-editor blockquote::before {
    content: '"';
    position: absolute;
    top: -0.05rem;
    left: 0.12rem;
    font-size: 0.60rem;
    color: var(--tb-blue);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

.tb-detail-editor pre, .tb-detail-editor code { font-family: 'Consolas', 'Monaco', monospace; }
.tb-detail-editor pre {
    background: #0d1b2a; color: #e0e6ed; padding: 0.20rem 0.25rem;
    border-radius: 0.08rem; overflow-x: auto; margin: 0.25rem 0;
    font-size: 0.14rem; line-height: 1.6;
}
.tb-detail-editor ul, .tb-detail-editor ol { padding-left: 0.25rem; margin: 0 0 0.18rem; }
.tb-detail-editor li { margin-bottom: 0.06rem; }
.tb-detail-editor a { color: var(--tb-blue); text-decoration: underline; text-underline-offset: 0.03rem; }

/* 标签 */
.tb-detail-tags {
    display: flex; flex-wrap: wrap; gap: 0.08rem;
    margin-top: 0.40rem; padding-top: 0.25rem;
    border-top: 0.01rem solid var(--tb-border);
}
.tb-detail-tag {
    padding: 0.05rem 0.12rem; border: 0.01rem solid var(--tb-border);
    border-radius: 0.16rem; font-size: 0.12rem; color: var(--tb-text-light);
    text-decoration: none; transition: all 0.3s;
}
.tb-detail-tag:hover { border-color: var(--tb-blue); color: var(--tb-blue); box-shadow: 0 0 0.08rem rgba(91,194,231,0.15); }

/* 分享 */
.tb-detail-share { display: flex; align-items: center; gap: 0.12rem; margin-top: 0.25rem; }
.tb-detail-share-label { font-size: 0.14rem; font-weight: 600; color: var(--tb-text); }
.tb-detail-share-btn {
    width: 0.40rem; height: 0.40rem;
    display: flex; align-items: center; justify-content: center;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
.tb-detail-share-btn svg {
    width: 0.18rem; height: 0.18rem;
    fill: currentColor;
}
.tb-detail-share-btn:hover {
    background: var(--tb-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 194, 231, 0.3);
}

/* 上下篇导航 */
.tb-detail-pagenav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.20rem;
    margin-top: 0.40rem; padding-top: 0.30rem; border-top: 0.01rem solid var(--tb-border);
}
.tb-detail-pagenav-item {
    background: #fff;
    border: 0.01rem solid #e8edf2;
    border-radius: 0.12rem;
    padding: 0.20rem 0.24rem;
    transition: all 0.3s ease;
}
.tb-detail-pagenav-item:hover {
    border-color: var(--tb-blue);
    background: linear-gradient(135deg, #fff 0%, #f0f9ff 100%);
    box-shadow: 0 4px 12px rgba(91, 194, 231, 0.15);
    transform: translateY(-2px);
}
.tb-pagenav-label {
    display: block;
    font-size: 0.11rem;
    color: var(--tb-blue);
    margin-bottom: 0.06rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tb-pagenav-title {
    display: block;
    font-size: 0.15rem;
    font-weight: 600;
    color: var(--tb-text);
    text-decoration: none;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.tb-pagenav-title:hover { color: var(--tb-blue); }
.tb-pagenav-none { color: var(--tb-text-light); font-weight: 400; }
.tb-pagenav-next { text-align: right; }

/* ============================================================
   详情页 — TOC 侧栏
   ============================================================ */
.tb-detail-sidebar { position: sticky; top: 1.00rem; }
.tb-detail-toc {
    background: #fff;
    border: 0.01rem solid #e8edf2;
    border-radius: 0.12rem;
    padding: 0.25rem;
    margin-bottom: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.tb-detail-toc-nav {
    max-height: 80vh;
    overflow-y: auto;
}
.tb-detail-toc-nav::-webkit-scrollbar { width: 0.04rem; }
.tb-detail-toc-nav::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 0.02rem; }
.tb-detail-toc-nav::-webkit-scrollbar-thumb { background: var(--tb-blue); border-radius: 0.02rem; }

.tb-detail-toc-list { list-style: none; padding: 0; margin: 0; }
.tb-detail-toc-item { margin-bottom: 0.06rem; }
.tb-toc-level-2 { padding-left: 0.15rem; }
.tb-toc-level-3 { padding-left: 0.30rem; }

.tb-detail-toc-link {
    position: relative;
    display: block;
    padding: 0.08rem 0.12rem;
    padding-left: 0.16rem;
    font-size: 0.13rem;
    color: var(--tb-text-light);
    text-decoration: none;
    border-radius: 0.06rem;
    transition: all 0.3s ease;
    line-height: 1.5;
}
.tb-detail-toc-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.03rem;
    height: 0;
    background: var(--tb-blue);
    transition: height 0.3s ease;
}
.tb-detail-toc-link:hover {
    color: var(--tb-blue);
    background: rgba(91, 194, 231, 0.04);
}
.tb-detail-toc-link.active {
    color: var(--tb-blue);
    font-weight: 600;
    background: rgba(91, 194, 231, 0.08);
}
.tb-detail-toc-link.active::before { height: 100%; }

/* ============================================================
   详情页 — 文末推荐
   ============================================================ */
.tb-recommend-section { padding: 0.60rem 0 0.80rem; background: var(--tb-bg); }
.tb-recommend-scroll {
    display: flex; gap: 0.24rem; overflow-x: auto;
    padding-bottom: 0.20rem; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.tb-recommend-scroll::-webkit-scrollbar { height: 0.04rem; }
.tb-recommend-scroll::-webkit-scrollbar-track { background: var(--tb-border); border-radius: 0.02rem; }
.tb-recommend-scroll::-webkit-scrollbar-thumb { background: var(--tb-blue); border-radius: 0.02rem; }

.tb-recommend-card {
    flex: 0 0 2.60rem;
    scroll-snap-align: start;
    position: relative;
    background: #fff;
    border: 0.01rem solid #e8edf2;
    border-radius: 0.16rem;
    padding: 0.28rem;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}
.tb-recommend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--tb-blue);
}
.tb-recommend-card-glow {
    position: absolute;
    inset: -0.01rem;
    border-radius: 0.16rem;
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(91,194,231,0.12), transparent 60%);
}
.tb-recommend-card:hover .tb-recommend-card-glow { opacity: 1; }
.tb-recommend-card-date {
    display: inline-block;
    font-size: 0.12rem;
    color: var(--tb-blue);
    font-weight: 600;
    margin-bottom: 0.12rem;
    padding: 0.04rem 0.10rem;
    background: rgba(91, 194, 231, 0.08);
    border-radius: 0.04rem;
}
.tb-recommend-card-title {
    font-size: 0.16rem;
    font-weight: 700;
    color: var(--tb-text);
    line-height: 1.5;
    margin: 0 0 0.12rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tb-recommend-card-more {
    font-size: 0.13rem;
    font-weight: 600;
    color: var(--tb-blue);
    transition: all 0.3s ease;
}
.tb-recommend-card:hover .tb-recommend-card-more { transform: translateX(4px); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1080px) {
    .tbd-hero-grid { grid-template-columns: 1fr !important; }
    .tbd-hero-copy { padding: 0.42rem 0.30rem; }
    .tbd-featured { min-height: 3.60rem; }
    .tbd-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .tbd-container { width: min(100% - 28px, 1240px); }
    .tbd-hero { padding-top: 0.25rem; }
    .tbd-hero-copy { padding: 0.34rem; }
    .tbd-hero-title { font-size: 0.43rem; }
    .tbd-featured { min-height: 3.70rem; }
    .tbd-section { padding: 0.58rem 0; }
    .tbd-section-head { display: block; }
    .tbd-section-head p { margin-top: 0.12rem; }
    .tbd-cards { grid-template-columns: 1fr; }
    .tb-detail-layout { grid-template-columns: 1fr; }
    .tb-detail-sidebar {
        position: static; display: grid;
        grid-template-columns: 1fr 1fr; gap: 0.15rem;
    }
    .tb-detail-sidebar > div { margin-bottom: 0; }
    .tb-detail-title { font-size: 0.30rem; }
    .tb-detail-pagenav { grid-template-columns: 1fr; }
    .tb-pagenav-next { text-align: left; }
    .tb-recommend-card { flex: 0 0 2.20rem; }
    .tb-detail-sidebar { grid-template-columns: 1fr; }
}