/* ============================================================================
   技术资料模块（P3 前端三页）专属样式
   头部/底部复用 news.css 的 site-header/site-footer；本文件只管模块主体。
   前缀 td- 避免与全局样式冲突；移动优先，桌面端 768px+ 响应式放大。
   ============================================================================ */

/* ---------- 公共 ---------- */
.td-page { max-width: 1200px; margin: 0 auto; padding: 16px 16px 96px; }
.td-page a { text-decoration: none; color: inherit; }

.td-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 12px; line-height: 18px; white-space: nowrap;
}
.td-badge-free { background: #e8f7ef; color: #27ae60; border: 1px solid #bfe8d2; }
.td-badge-points { background: #fdf3e7; color: #e67e22; border: 1px solid #f5d9b8; }
.td-chip {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: #eef3f8; color: #4a6785; font-size: 12px; line-height: 18px;
    white-space: nowrap;
}

/* ---------- 聚合页：搜索区（商城 CTA：居中 720px + 橙色渐变主按钮） ---------- */
.td-hero { text-align: center; padding: 14px 0 2px; }
.td-search-row {
    display: flex; gap: 12px; align-items: stretch; justify-content: center;
    max-width: 1040px; margin: 0 auto;
}
/* 简易统计：总数 / 累计下载 / 今日新增——与搜索、发布同排消化行内空白；
   宽度不足时（≤1024px，含手机端）整体隐藏，绝不挤压搜索框 */
.td-search-stats {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: #7b8a99; white-space: nowrap;
}
.td-search-stats b {
    color: #2f80ed; font-weight: 700; font-size: 13.5px; margin: 0 2px;
    font-variant-numeric: tabular-nums;
}
.td-search-stats i { display: inline-block; width: 1px; height: 12px; background: #dde4ea; }
@media (max-width: 1024px) { .td-search-stats { display: none; } }
.td-search-row .td-search-bar {
    flex: 1; max-width: none; margin: 0;
}
.td-publish-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none;
    color: #fff; background: linear-gradient(135deg, #ff8f3c, #ff5c29);
    box-shadow: 0 2px 8px rgba(255, 108, 46, .28); white-space: nowrap;
}
.td-publish-btn:hover { background: linear-gradient(135deg, #ff7d20, #f04a15); }
.td-search-bar {
    display: flex; max-width: 640px; margin: 0 auto;
    border: 2px solid #ff7a45; border-radius: 999px; overflow: hidden; background: #fff;
}
.td-search-bar input {
    flex: 1; border: 0; outline: none; padding: 10px 18px; font-size: 15px; min-width: 0;
}
.td-search-bar button {
    border: 0; color: #fff; padding: 0 28px; font-size: 15px; font-weight: 600; cursor: pointer;
    background: linear-gradient(135deg, #ff8f3c, #ff5c29);
}
.td-search-bar button:hover { background: linear-gradient(135deg, #ff7d20, #f04a15); }

/* ---------- 聚合页：分类导航（京东式：标题条 + 左栏 + 悬停右弹面板） ---------- */
.td-cats { margin-top: 18px; }
/* 标题条与 rail 一体化卡片（上圆角标题条 + 下圆角列表），去掉外置标题的割裂感 */
.td-cats h3 {
    font-size: 15px; font-weight: 600; color: #fff; margin: 0;
    height: 38px; line-height: 38px; padding: 0 14px; letter-spacing: 1px;
    background: linear-gradient(135deg, #2f80ed, #1e5fbe);
    border-radius: 10px 10px 0 0;
}
.td-jdnav { position: relative; min-height: 200px; }
.td-jd-rail {
    list-style: none; margin: 0; padding: 4px 0; width: 240px;
    background: #fff; border: 1px solid #e4eaf0; border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 4px rgba(31, 45, 61, .04);
}
.td-jd-row {
    display: flex; align-items: center; height: 42px; padding: 0 14px;
    font-size: 14px; color: #34495e; text-decoration: none; cursor: pointer;
    border-left: 2px solid transparent; transition: background .12s, color .12s;
}
.td-jd-row:hover, .td-jd-item:focus-within .td-jd-row {
    background: #f0f6ff; color: #2f80ed; border-left-color: #2f80ed;
}
.td-jd-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-jd-arr { color: #b0bcc9; font-size: 17px; line-height: 1; transition: transform .15s, color .15s; }
.td-jd-row:hover .td-jd-arr { transform: translateX(2px); color: #2f80ed; }
/* 弹出面板：left 略压住左栏右边框，避免悬停穿越 1px 空隙时面板闪没。
   高度随内容自适应（不设 min-height，矮面板不留白块）；
   top 由 JS 对齐当前悬停行（placeFly），行→面板水平直达，
   配合 rail 的 200ms 延迟关闭，鼠标旅程不再闪没。
   宽度上限由 JS 封顶（placeFly）：hero-grid 后 nav 只有 240 宽，
   CSS calc(100% - 246px) 会得负值把面板塌成 14px（09-27 实测） */
.td-jd-flyout {
    display: none; position: absolute; left: 238px; top: 0; width: 610px;
    max-width: none; overflow: auto;
    /* 浮在最上层完整展示分类：高度不再受左栏（214px）约束，只按视口封顶；
       z-index 990 盖住首屏轮播/热门榜与下方资料卡（09-27 用户要求「处于最高层」） */
    max-height: calc(100vh - 20px);
    background: #fff; border: 1px solid #e4eaf0; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(31, 45, 61, .16); padding: 10px 6px; z-index: 990;
    flex-wrap: wrap; align-content: flex-start;
}
.td-jd-item:hover > .td-jd-flyout, .td-jd-item:focus-within > .td-jd-flyout { display: flex; }
.td-jd-group { width: 192px; padding: 8px 12px; border-right: 1px dashed #e4eaf0; }
.td-jd-group.row-end { border-right: 0; }
.td-jd-group-t {
    display: block; font-size: 13px; font-weight: 600; color: #1f2d3d;
    margin-bottom: 4px; text-decoration: none;
}
.td-jd-group-t:hover { color: #2f80ed; }
/* 三级分类：每列固定 3 个，超出自动起新列（grid 列流动，列内自上而下）；
   列间距收紧让多列紧凑抱团，与组间分隔线拉开对比，归属一目了然 */
.td-jd-links {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
    align-content: start; column-gap: 12px;
}
.td-jd-links a { font-size: 12px; color: #7f8c9b; text-decoration: none; line-height: 2; white-space: nowrap; }
.td-jd-links a:hover { color: #2f80ed; }
.td-jd-links.empty { display: none; }

/* ---------- 聚合页：Tab 区块 ---------- */
.td-section { margin-top: 30px; }
.td-tabs { display: flex; gap: 4px; align-items: baseline; border-bottom: 2px solid #e4eaf0; margin-bottom: 14px; }
.td-tab {
    padding: 9px 18px; font-size: 15px; color: #5e6d82; cursor: pointer; border: 0;
    background: transparent; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.td-tab.active { color: #2f80ed; border-bottom-color: #2f80ed; font-weight: 600; }
.td-tab-total { margin-left: auto; font-size: 13px; color: #95a5b3; padding-right: 4px; }

/* ---------- 聚合页：首屏主体（左分类导航 + 右概览栏，消除导航右侧空白） ---------- */
.td-hero-grid { display: flex; gap: 16px; margin-top: 26px; align-items: stretch; }
.td-hero-grid > .td-cats {
    flex: 0 0 240px; margin-top: 0;
    display: flex; flex-direction: column; /* rail 撑满右栏高度，左列不留空白 */
}
/* dim-container 中间隔了一层 div，逐层用 flex 传递高度（height:100% 百分比会断链） */
.td-hero-grid > .td-cats #dim-container { flex: 1; display: flex; flex-direction: column; }
.td-hero-grid > .td-cats .td-jdnav { flex: 1; display: flex; }
.td-hero-grid > .td-cats .td-jd-rail { flex: 1; box-sizing: border-box; }
.td-home-side {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px;
}
/* 轮播 + 热门榜：主内容行，与左栏等高对齐（数据条已按用户要求取消，
   首屏高度由本行决定，避免左栏被撑出内部空白） */
.td-side-main {
    flex: 1; display: flex; gap: 12px; min-height: 214px;
}

/* ---------- 轮播图（运营推荐位，后台 techdoc:banner:manage 配置） ---------- */
.td-carousel {
    flex: 1 1 64%; min-width: 0; position: relative; overflow: hidden;
    border-radius: 10px; background: linear-gradient(135deg, #1e3c72, #2a5298);
    min-height: 214px;
}
.td-carousel.no-banner { /* 空态占位与正常轮播同构（64% 宽 + 渐变底），仅标记状态 */ }
/* 文字轮播（无图纯文案位，后台文案表单生成）：渐变底 + 居中主/副标题 + CTA */
.td-car-slide.text-banner {
    align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
}
.td-car-slide.text-banner::after { display: none; } /* 纯渐变底无需压暗遮罩 */
.td-car-slide.text-banner .td-car-title { font-size: 26px; font-weight: 700; letter-spacing: 2px; }
.td-car-slide.text-banner .td-car-cta-chip {
    margin-top: 16px; padding: 9px 22px; border-radius: 6px;
    background: linear-gradient(135deg, #ff8f3c, #ff5c29); color: #fff;
    font-size: 13px; font-weight: 600; width: fit-content;
}
.td-car-slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .5s ease; background-size: cover; background-position: center;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 22px 26px; text-decoration: none; cursor: pointer;
}
.td-car-slide.active { opacity: 1; visibility: visible; }
/* 压暗渐变保证文字可读（图上文字白字 + 底部遮罩） */
.td-car-slide::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
    background: linear-gradient(180deg, rgba(15, 30, 50, 0) 0%, rgba(15, 30, 50, .72) 100%);
    pointer-events: none;
}
.td-car-title {
    position: relative; z-index: 1; color: #fff; font-size: 21px; font-weight: 600;
    line-height: 1.4; text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.td-car-title:not(:empty) + .td-car-sub { margin-top: 4px; }
.td-car-sub { position: relative; z-index: 1; color: rgba(255, 255, 255, .82); font-size: 13px; }
/* 无标题纯图位：整图直达 */
.td-car-slide.plain { padding: 0; }
.td-car-slide.plain::after { display: none; }
/* 指示点 */
.td-car-dots {
    position: absolute; z-index: 2; left: 20px; bottom: 14px; display: flex; gap: 6px;
}
.td-car-slide.active ~ .td-car-dots { bottom: 14px; }
.td-car-dots i {
    width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .45);
    cursor: pointer; transition: background .15s, width .15s;
}
.td-car-dots i.on { background: #fff; width: 20px; border-radius: 5px; }
/* 前后切换箭头 */
.td-car-arrow {
    position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; line-height: 28px; text-align: center;
    color: rgba(255, 255, 255, .85); background: rgba(15, 30, 50, .3);
    border: 0; border-radius: 50%; cursor: pointer; font-size: 15px;
    opacity: 0; transition: opacity .15s;
}
.td-carousel:hover .td-car-arrow { opacity: 1; }
.td-car-arrow.prev { left: 10px; }
.td-car-arrow.next { right: 10px; }
.td-car-arrow:hover { background: rgba(15, 30, 50, .55); }
/* 未配置轮播时的占位（管理员带「去后台配置」按钮，游客纯宣传图）：
   保持轮播区结构不变，页面首屏形态恒定 */
.td-car-promo {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
    align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.td-car-promo .t {
    color: #fff; font-size: 26px; font-weight: 700; letter-spacing: 2px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.td-car-promo .s { color: rgba(255, 255, 255, .85); font-size: 14px; }
.td-car-promo button,
.td-car-promo .td-car-cta {
    margin-top: 10px; border: 0; cursor: pointer; padding: 9px 20px; border-radius: 6px;
    background: rgba(255, 255, 255, .92); color: #1e3c72; font-size: 13px; font-weight: 600;
    text-decoration: none; display: inline-block; line-height: 1.2;
}
/* 运营配置的 CTA 面向所有访客：用主色（橙）与管理员的后台入口（白）区分 */
.td-car-promo .td-car-cta { background: linear-gradient(135deg, #ff8f3c, #ff5c29); color: #fff; }
.td-car-promo button:hover { background: #fff; }
.td-car-promo .td-car-cta:hover { background: linear-gradient(135deg, #ff9b52, #ff6a3a); }

/* ---------- 本周热门榜 / 精选位（紧凑榜单行，与轮播等高） ---------- */
.td-featured {
    flex: 1 1 36%; min-width: 0; display: flex; flex-direction: column; gap: 6px;
}
.td-feat-head {
    font-size: 13px; font-weight: 600; color: #34495e; padding: 2px 2px 0; flex: 0 0 auto;
}
.td-feat-card {
    flex: 1 1 0; min-height: 0; max-height: 44px; /* 紧凑榜单行，禁止拉成大空白条 */
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e4eaf0; border-radius: 8px; padding: 4px 8px;
    text-decoration: none; box-shadow: 0 1px 3px rgba(31, 45, 61, .04);
    transition: border-color .15s, box-shadow .15s;
}
.td-feat-card:hover { border-color: #2f80ed; box-shadow: 0 2px 10px rgba(47, 128, 237, .12); }
.td-feat-rank {
    flex: 0 0 18px; text-align: center; font-size: 13px; font-weight: 800; color: #b0bcc9;
}
/* 前三名高亮（京东排行榜风格） */
.td-feat-card:nth-of-type(1) .td-feat-rank { color: #e8412f; }
.td-feat-card:nth-of-type(2) .td-feat-rank { color: #ff7a45; }
.td-feat-card:nth-of-type(3) .td-feat-rank { color: #f5a623; }
.td-feat-thumb {
    flex: 0 0 44px; height: 32px; border-radius: 4px; background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10px; background: linear-gradient(135deg, #a9c4e4, #7fa8d4);
}
.td-feat-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.td-feat-name {
    flex: 1; min-width: 0; font-size: 13px; color: #34495e;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-feat-meta { flex: 0 0 auto; font-size: 12px; color: #95a5b3; }
.td-feat-meta .free { color: #22b07d; }
.td-feat-meta .pts { color: #ff7a45; }


/* ---------- 无限滚动：状态行 / 哨兵 / 回到顶部 ---------- */
.td-list-status { text-align: center; color: #95a5b3; font-size: 13px; padding: 14px 0 4px; min-height: 20px; }
.td-list-status .spin {
    display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
    border: 2px solid #d7dee6; border-top-color: #2f80ed; border-radius: 50%;
    animation: td-spin .8s linear infinite;
}
@keyframes td-spin { to { transform: rotate(360deg); } }
.td-sentinel { height: 1px; }
.td-backtop {
    display: none; position: fixed; right: 28px; bottom: 88px; z-index: 90;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e4eaf0;
    background: #fff; color: #4a6785; font-size: 18px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(31, 45, 61, .12);
}
.td-backtop.show { display: block; }
.td-backtop:hover { color: #2f80ed; border-color: #2f80ed; }

/* ---------- 列表卡（海报卡：封面为主角，全宽 4:3，对齐详情页封面比例） ---------- */
.td-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 16px; }
.td-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #e4eaf0;
    border-radius: 10px; overflow: hidden; cursor: pointer; /* 整卡可点进详情，卡内链接自有行为 */
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.td-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(31,45,61,.10); border-color: #d7dee6; }
.td-card-cover {
    position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
    background: #f0f3f7; display: flex; align-items: center; justify-content: center;
}
.td-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.td-card:hover .td-card-cover img { transform: scale(1.04); }
.td-card-cover .ph { font-size: 13px; color: #95a5b3; text-align: center; padding: 8px 14px; word-break: break-all; }
/* 价格徽章浮在封面左上角（JS 输出在 .td-card-cover 内） */
.td-card-cover .td-badge { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: 0 2px 8px rgba(31,45,61,.16); }
.td-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; }
.td-card-title {
    font-size: 15px; color: #1f2d3d; font-weight: 600; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0;
}
.td-card-title a:hover { color: #2f80ed; }
.td-card-summary {
    font-size: 13px; color: #7f8c9b; line-height: 1.5; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.td-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.td-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: #95a5b3; }
.td-card-foot {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    font-size: 12px; color: #95a5b3; margin-top: auto;
}
.td-card-foot .author { color: #4a6785; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-card-foot .time { flex: 0 0 auto; }
.td-load-more {
    display: block; width: 100%; margin-top: 14px; padding: 11px; text-align: center;
    background: #fff; border: 1px solid #d7dee6; border-radius: 8px; color: #4a6785;
    font-size: 14px; cursor: pointer;
}
.td-load-more:hover { border-color: #2f80ed; color: #2f80ed; }
.td-load-more:disabled { opacity: .5; cursor: default; }
.td-empty { text-align: center; color: #95a5b3; padding: 48px 0; font-size: 14px; }
.td-empty .big { font-size: 40px; display: block; margin-bottom: 10px; }

/* ---------- 列表视图：面包屑 + 筛选条 ---------- */
.td-crumb { font-size: 13px; color: #95a5b3; margin: 4px 0 12px; line-height: 1.6; }
.td-crumb a { color: #4a6785; }
.td-crumb a:hover { color: #2f80ed; }
.td-filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: #f7f9fb; border: 1px solid #e4eaf0; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 14px; position: sticky; top: 56px; z-index: 10;
}
.td-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-filter-label { font-size: 13px; color: #95a5b3; }
.td-fchip {
    padding: 4px 12px; border-radius: 999px; font-size: 13px; color: #4a6785;
    background: #fff; border: 1px solid #d7dee6; cursor: pointer;
}
.td-fchip:focus-visible { outline: 2px solid #2f80ed; outline-offset: 1px; }
.td-fchip.active { background: #2f80ed; border-color: #2f80ed; color: #fff; }
.td-filter-result { margin-left: auto; font-size: 13px; color: #95a5b3; }
@media (max-width: 768px) {
    /* news.css 在 ≤768px 把 .site-header 变为 fixed(56px)：主体必须让位，否则首屏被盖 */
    .td-page { padding-top: 72px; }
    .td-filter-bar { top: 56px; }
    .td-filter-result { flex-basis: 100%; margin-left: 0; }
    /* 分类导航移动端：左栏全宽，面板变点击展开的手风琴（触屏没有可靠 hover） */
    .td-jdnav { min-height: 0; }
    /* 首屏主体纵向堆叠：概览栏排到分类导航下方 */
    .td-hero-grid { flex-direction: column; }
    .td-hero-grid > .td-cats { flex: 0 0 auto; width: 100%; }
    /* 手机端整块隐藏右区（轮播图 + 本周热门）与同排统计：小屏优先留给分类与资料列表，
       JS 同步跳过这两支请求，避免白跑流量 */
    .td-home-side { display: none; }
    .td-search-stats { display: none; }
    /* 若日后恢复移动端展示，沿用下面这套纵向堆叠规则（当前被上面的隐藏规则覆盖） */
    .td-side-main { flex-direction: column; min-height: 0; }
    .td-carousel { flex: 0 0 auto; min-height: 170px; height: 170px; }
    .td-featured { flex: 0 0 auto; }
    .td-feat-card { flex: 0 0 auto; height: 46px; max-height: 46px; }
    .td-jd-rail { width: 100%; }
    .td-jd-flyout {
        position: static; width: auto; max-width: none; max-height: none;
        box-shadow: none; border: 0; border-top: 1px dashed #e4eaf0;
        border-radius: 0; padding: 6px 14px 12px;
    }
    .td-jd-item:hover > .td-jd-flyout, .td-jd-item:focus-within > .td-jd-flyout { display: none; }
    .td-jd-item.open > .td-jd-flyout { display: flex; }
    .td-jd-group { width: 50%; }
    /* 窄屏组宽有限，恢复纵向单列，避免三列挤压换行错乱 */
    .td-jd-links { display: flex; flex-direction: column; }
    .td-jd-links a { white-space: normal; }
}

/* ---------- 列表视图：左侧分类树面板（多层分类） ---------- */
.td-list-layout { display: flex; gap: 16px; align-items: flex-start; }
.td-list-main { flex: 1; min-width: 0; }
.td-tree-panel {
    flex: 0 0 auto; width: 232px; background: #fff; border: 1px solid #e4eaf0;
    border-radius: 10px; padding: 12px; box-sizing: border-box;
    max-height: calc(100vh - 140px); overflow: auto; position: sticky; top: 84px;
}
.td-tree-dim { margin-bottom: 14px; }
.td-tree-dim:last-child { margin-bottom: 0; }
.td-tree-dim-name { font-size: 13px; color: #34495e; font-weight: 600; margin-bottom: 6px; }
.td-tree, .td-tree-sub { list-style: none; margin: 0; padding: 0; }
.td-tree-sub { display: none; margin-left: 14px; border-left: 1px solid #e4eaf0; padding-left: 8px; }
.td-tree-node.open > .td-tree-sub { display: block; }
.td-tree-node { padding: 2px 0; }
.td-tree-toggle {
    display: inline-block; width: 16px; cursor: pointer; color: #95a5b3; font-size: 11px;
    user-select: none; text-align: center;
}
.td-tree-link {
    display: inline; font-size: 13px; color: #4a6785; cursor: pointer; padding: 2px 4px;
    border-radius: 4px; word-break: break-all;
}
.td-tree-link:hover { color: #2f80ed; background: #f0f6ff; }
.td-tree-link.active { color: #2f80ed; font-weight: 600; background: #eaf3fe; }
/* 多选框：勾选=加入筛选集合（同维度 OR/跨维度 AND），点链接仍单选跳转 */
.td-tree-check {
    display: inline-block; width: 14px; height: 14px; margin-right: 5px;
    border: 1.5px solid #b9c6d2; border-radius: 3px; vertical-align: -2px;
    cursor: pointer; user-select: none; background: #fff; line-height: 1;
}
.td-tree-check:hover { border-color: #2f80ed; }
.td-tree-check.checked { background: #2f80ed; border-color: #2f80ed; position: relative; }
.td-tree-check.checked::after {
    content: ""; position: absolute; left: 3px; top: 0.5px;
    width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.td-tree-check:focus-visible { outline: 2px solid #2f80ed; outline-offset: 1px; }
.td-tree-toggle-btn { display: none; }
@media (max-width: 768px) {
    /* 移动端：树面板默认收起，按钮展开 */
    .td-list-layout { display: block; }
    .td-tree-toggle-btn {
        display: block; width: 100%; margin-bottom: 10px; padding: 9px; box-sizing: border-box;
        background: #fff; border: 1px solid #d7dee6; border-radius: 8px;
        color: #4a6785; font-size: 14px; cursor: pointer;
    }
    .td-tree-panel { display: none; width: auto; position: static; max-height: 320px; }
    .td-tree-panel.open { display: block; }
    /* 移动端：搜索框+发布按钮换行堆叠 */
    .td-search-row { flex-direction: column; max-width: none; }
    .td-search-row .td-search-bar input { font-size: 14px; }
    .td-publish-btn { padding: 10px 20px; }
}

/* ---------- 详情页 ---------- */
.td-detail-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.td-panel { background: #fff; border: 1px solid #e4eaf0; border-radius: 12px; padding: 16px; }
.td-detail-head { display: flex; gap: 16px; }
.td-detail-cover {
    flex: 0 0 auto; width: 160px; height: 120px; border-radius: 10px; overflow: hidden;
    background: #f0f3f7; display: flex; align-items: center; justify-content: center;
}
.td-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-detail-cover .ph { font-size: 13px; color: #95a5b3; text-align: center; padding: 8px; word-break: break-all; }
.td-detail-info { flex: 1; min-width: 0; }
.td-detail-title { font-size: 20px; color: #1f2d3d; margin: 0 0 8px; line-height: 1.4; word-break: break-all; }
.td-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #95a5b3; margin-bottom: 8px; }
.td-detail-meta .author { color: #4a6785; }
.td-detail-summary { font-size: 14px; color: #5e6d82; line-height: 1.7; margin: 0; white-space: pre-wrap; word-break: break-word; }
.td-section-title { font-size: 16px; color: #1f2d3d; margin: 0 0 12px; }

/* 附件卡 */
.td-att-card { border: 1px solid #e4eaf0; border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #fafcfe; }
.td-att-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.td-att-icon { font-size: 22px; flex: 0 0 auto; }
.td-att-name { flex: 1; min-width: 140px; font-size: 14px; color: #34495e; word-break: break-all; }
.td-att-sub { font-size: 12px; color: #95a5b3; }
.td-att-toggle {
    border: 1px solid #d7dee6; background: #fff; color: #4a6785; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.td-att-toggle:hover { border-color: #2f80ed; color: #2f80ed; }
.td-att-warn { font-size: 12px; color: #e67e22; }
.td-att-dl {
    background: linear-gradient(135deg, #27ae60, #2ecc71); color: #fff; border: 0;
    border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600;
    cursor: pointer; flex: 0 0 auto; letter-spacing: 1px;
    box-shadow: 0 2px 10px rgba(39, 174, 96, .30);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.td-att-dl:hover {
    transform: translateY(-1px); filter: brightness(1.06);
    box-shadow: 0 4px 14px rgba(39, 174, 96, .40);
}
.td-att-dl:active { transform: translateY(0); filter: brightness(.97); box-shadow: 0 2px 6px rgba(39, 174, 96, .30); }
.td-entries { margin-top: 10px; border-top: 1px dashed #e4eaf0; padding-top: 10px; }
.td-entry-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.td-entry-table th, .td-entry-table td {
    text-align: left; padding: 5px 8px; border-bottom: 1px solid #eef2f6; color: #5e6d82;
    word-break: break-all;
}
.td-entry-table th { color: #95a5b3; font-weight: 500; background: #f7f9fb; }
.td-entry-table td.size, .td-entry-table th.size { text-align: right; white-space: nowrap; }

/* 相关推荐 */
.td-related-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid #eef2f6; }
.td-related-item:last-child { border-bottom: 0; }
.td-related-item .t { font-size: 14px; color: #34495e; line-height: 1.4; }
.td-related-item .t:hover { color: #2f80ed; }
.td-related-item .m { font-size: 12px; color: #95a5b3; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- 评论区 ---------- */
.td-comment-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.td-comment-editor textarea {
    width: 100%; min-height: 84px; border: 1px solid #d7dee6; border-radius: 8px;
    padding: 10px 12px; font-size: 14px; resize: vertical; outline: none; box-sizing: border-box;
}
.td-comment-editor textarea:focus { border-color: #2f80ed; }
.td-comment-editor .ops { display: flex; justify-content: space-between; align-items: center; }
.td-comment-editor .hint { font-size: 12px; color: #95a5b3; }
.td-btn-primary {
    background: #2f80ed; color: #fff; border: 0; border-radius: 8px; padding: 8px 22px;
    font-size: 14px; cursor: pointer;
}
.td-btn-primary:hover { background: #256bc9; }
.td-btn-primary:disabled { opacity: .6; cursor: default; }
.td-login-tip { background: #f7f9fb; border: 1px dashed #d7dee6; border-radius: 8px; padding: 14px; text-align: center; color: #7f8c9b; font-size: 14px; margin-bottom: 16px; }
.td-login-tip a { color: #2f80ed; }

.td-floor { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eef2f6; }
.td-avatar {
    flex: 0 0 auto; width: 36px; height: 36px; aspect-ratio: 1/1; border-radius: 50%;
    background: #2f80ed; color: #fff; font-size: 15px; display: flex;
    align-items: center; justify-content: center; font-weight: 600;
}
.td-floor-body { flex: 1; min-width: 0; }
.td-floor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.td-floor-head .name { color: #34495e; font-weight: 600; }
.td-floor-head .time { color: #a0aec0; }
.td-floor-head .reply-btn { color: #2f80ed; cursor: pointer; margin-left: auto; }
.td-floor-content { font-size: 14px; color: #34495e; line-height: 1.65; margin-top: 4px; word-break: break-word; white-space: pre-wrap; }
.td-replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid #eef2f6; }
.td-reply { display: flex; gap: 8px; padding: 7px 0; }
.td-reply .td-avatar { width: 26px; height: 26px; font-size: 12px; }
/* 会员真实头像（img 形态）：裁圆铺满，尺寸随父级 场景（36/26px） */
.td-avatar-img { object-fit: cover; background: #e8eef5; }
.td-reply-body { flex: 1; min-width: 0; font-size: 13px; }
.td-reply-body .name { color: #4a6785; font-weight: 600; }
.td-reply-body .time { color: #a0aec0; font-size: 12px; margin-left: 6px; }
.td-reply-body .txt { color: #34495e; margin-top: 2px; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.td-comment-more { text-align: center; padding: 10px 0 2px; }
.td-comment-more button {
    border: 1px solid #d7dee6; background: #fff; color: #4a6785; border-radius: 6px;
    padding: 6px 18px; font-size: 13px; cursor: pointer;
}

/* 回复输入条 */
.td-reply-editor { margin: 8px 0; display: flex; gap: 8px; }
.td-reply-editor input {
    flex: 1; border: 1px solid #d7dee6; border-radius: 8px; padding: 7px 10px; font-size: 13px; outline: none; min-width: 0;
}
.td-reply-editor input:focus { border-color: #2f80ed; }
.td-reply-editor .send { background: #2f80ed; color: #fff; border: 0; border-radius: 8px; padding: 0 16px; font-size: 13px; cursor: pointer; }

/* ---------- 吸底操作条 ---------- */
.td-sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: #fff; border-top: 1px solid #e4eaf0;
    box-shadow: 0 -4px 16px rgba(31,45,61,.06);
    padding: 10px 16px; display: flex; align-items: center; gap: 12px;
}
.td-sticky-bar .price { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.td-sticky-bar .price .t { font-size: 13px; color: #95a5b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-sticky-bar .dl {
    background: linear-gradient(135deg, #27ae60, #2ecc71); color: #fff; border: 0;
    border-radius: 10px; padding: 12px 38px;
    font-size: 16px; font-weight: 700; cursor: pointer; flex: 0 0 auto; letter-spacing: 2px;
    box-shadow: 0 4px 16px rgba(39, 174, 96, .38);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.td-sticky-bar .dl:hover {
    transform: translateY(-1px); filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(39, 174, 96, .46);
}
.td-sticky-bar .dl:active { transform: translateY(0); filter: brightness(.97); }
.td-sticky-bar .dl.free { background: linear-gradient(135deg, #2f80ed, #56a0f3); box-shadow: 0 4px 16px rgba(47, 128, 237, .38); }
.td-sticky-bar .dl.free:hover { box-shadow: 0 6px 20px rgba(47, 128, 237, .46); }

/* ---------- 桌面端响应式 ---------- */
/* 卡片已改海报卡（auto-fill 自适应列数），此处不再固定 .td-card-cover 尺寸、不再写死 2/3 列 */
@media (min-width: 768px) {
    .td-page { padding: 24px 24px 96px; }
    .td-hero h2 { font-size: 30px; }
    .td-detail-grid.two-col { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
    .td-detail-cover { width: 220px; height: 165px; }
    .td-jd-flyout { width: 540px; }
    .td-jd-group { width: 168px; }
}

/* ---------- 详情页移动端（必须置于详情基础样式之后：媒体查询不加特异性，同特异性后者胜） ---------- */
@media (max-width: 768px) {
    /* 首卡放弃「左封面+右文字」：375px 下文字列仅剩 ~150px，标题每行 4-5 字、
       封面旁大片空白。改纵向海报式：封面全宽 4:3 在上，标题/元信息/摘要全宽在下 */
    .td-detail-head { flex-direction: column; gap: 10px; }
    .td-detail-cover { width: 100%; height: auto; aspect-ratio: 4 / 3; flex-basis: auto; }
    .td-detail-cover .ph { font-size: 14px; }
    .td-detail-title { font-size: 18px; margin-bottom: 6px; }
    .td-detail-meta { font-size: 12px; row-gap: 6px; }
    .td-detail-summary { font-size: 13px; }
}