/* ============================================================
   attack-trace-df.css — 数字取证子课题专题 增量样式
   与 style.css / attack-trace.css 完全兼容，不修改全局样式
   ============================================================ */

/* ===== 全局防横向溢出保险 ===== */
html{overflow-x:hidden}
img{max-width:100%}

/* ===== .reveal CSS动画兜底：即使JS完全失效，0.9秒内主体自动显现，杜绝白页 ===== */
@keyframes dfForceShow{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.content-grid.reveal{animation:dfForceShow .6s ease .9s both}

/* 阅读进度条 */
.df-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--primary-gradient);z-index:1200;transition:width .1s linear}
.df-progress-wrap{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(26,110,255,.08);z-index:1199}

/* JS 渲染图标容器 */
.df-ico{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-light);border-radius:12px;color:var(--primary);flex-shrink:0;transition:var(--transition)}
.df-ico:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,110,255,.18)}
.df-ico svg{width:22px;height:22px;display:block}
.df-ico.sm{width:36px;height:36px;border-radius:10px}
.df-ico.sm svg{width:18px;height:18px}
.dsec-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.dsec-head h2{margin:0 !important;border-bottom:none !important;padding-bottom:0 !important}
.dsec-kicker{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--primary);background:var(--primary-light);padding:3px 12px;border-radius:100px;margin-bottom:6px}

/* 提示框 */
.callout{border-radius:var(--radius-sm);padding:18px 22px;margin:22px 0;font-size:14px;line-height:1.9;color:var(--text-secondary);border-left:4px solid}
.callout strong{color:var(--text)}
.callout .co-title{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);font-size:14px;margin-bottom:6px}
.callout.blue{background:var(--primary-light);border-color:var(--primary)}
.callout.blue .co-title{color:var(--primary)}
.callout.warn{background:#fff7ed;border-color:#f57c00}
.callout.warn .co-title{color:#ea580c}
.callout.good{background:#f0fdf4;border-color:#16a34a}
.callout.good .co-title{color:#15803d}
.callout.red{background:#fef2f2;border-color:#dc2626}
.callout.red .co-title{color:#b91c1c}

/* 迷你卡片 */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.mini-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;transition:var(--transition)}
.mini-card:hover{border-color:rgba(26,110,255,.25);box-shadow:var(--shadow)}
.mini-card h5{font-size:14px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.mini-card p{font-size:12.5px;color:var(--text-secondary);line-height:1.75;margin:0}

/* 数据表格 */
.df-table-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch;margin:20px 0;background:#fff}
.df-table{width:100%;border-collapse:collapse;font-size:13px}
.df-table th{background:var(--primary-light);color:var(--primary);text-align:left;padding:11px 14px;font-weight:700;white-space:nowrap}
.df-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text-secondary);line-height:1.7;vertical-align:top}
.df-table td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.df-table tr:last-child td{border-bottom:none}
.df-table tr:hover td{background:#f8fafc}

/* 参考文献 */
.ref-group{margin:28px 0 16px;font-size:16px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:10px}
.ref-group::before{content:'';width:4px;height:16px;background:var(--primary-gradient);border-radius:2px}
.ref-list{display:flex;flex-direction:column;gap:10px}
.ref-item{display:flex;gap:12px;font-size:13px;line-height:1.8;color:var(--text-secondary);background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 16px;transition:var(--transition)}
.ref-item:hover{border-color:rgba(26,110,255,.25);box-shadow:var(--shadow)}
.ref-num{font-weight:800;color:var(--primary);flex-shrink:0;font-variant-numeric:tabular-nums}
.ref-item a{color:var(--primary);text-decoration:none;word-break:break-all}
.ref-item a:hover{text-decoration:underline}

/* 章节内引用角标 */
.cite{color:var(--primary);font-weight:700;font-size:.85em;vertical-align:super;text-decoration:none}
.cite:hover{text-decoration:underline}

/* 页内目录chips */
.df-toc{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.df-toc a{font-size:12.5px;padding:6px 14px;border-radius:100px;background:#fff;border:1px solid var(--border);color:var(--text-secondary);text-decoration:none;font-weight:500;transition:var(--transition)}
.df-toc a:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}

/* 案例卡 */
.case-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;margin-bottom:20px;transition:var(--transition)}
.case-card:hover{border-color:rgba(26,110,255,.2);box-shadow:var(--shadow-hover)}
.case-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.case-head h4{font-size:16px;margin:0;line-height:1.5}
.case-tagline{font-size:12px;font-weight:700;color:#ea580c;background:#fff7ed;padding:3px 12px;border-radius:100px;white-space:nowrap;flex-shrink:0;margin-top:2px}
.case-card p{font-size:13.5px;color:var(--text-secondary);line-height:1.85;margin-bottom:10px}
.case-points{background:var(--bg-warm);border-radius:10px;padding:14px 18px;margin-top:8px}
.case-points h6{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px}
.case-points li{font-size:12.5px;color:var(--text-secondary);line-height:1.75}

/* 阶段徽章 */
.phase-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 12px;border-radius:100px;margin-bottom:8px}

/* 上下页翻页器 */
.df-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:48px;flex-wrap:wrap}
.pager-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:14px;background:#fff;border:1.5px solid var(--border);color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:600;transition:var(--transition);max-width:46%}
.pager-btn:hover{border-color:var(--primary);color:var(--primary);box-shadow:var(--shadow);transform:translateY(-2px)}
.pager-btn .pb-label{display:flex;flex-direction:column;line-height:1.35}
.pager-btn .pb-label small{font-size:11px;color:var(--text-light);font-weight:500}
.pager-btn .pb-label span{font-size:14px}
.pager-btn.next{text-align:right;flex-direction:row}
.pager-btn .df-ico{width:36px;height:36px}
.pager-btn.disabled{opacity:.45;pointer-events:none}
.pager-pages{display:flex;gap:8px;justify-content:center;flex:1}
.pager-page{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--text-secondary);font-weight:700;font-size:13px;transition:var(--transition)}
.pager-page:hover{border-color:var(--primary);color:var(--primary)}
.pager-page.active{background:var(--primary-gradient);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(26,110,255,.3)}

/* 子课题页码标识 */
.sub-hero-pages{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.shp{font-size:12px;font-weight:600;padding:5px 14px;border-radius:100px;background:rgba(26,110,255,.08);color:var(--primary);border:1px solid rgba(26,110,255,.15);text-decoration:none}
.shp.on{background:var(--primary-gradient);color:#fff;border-color:transparent}
a.shp:hover{transform:translateY(-1px)}

/* ===== 响应式 ===== */
@media (max-width:1024px){
    .mini-grid{grid-template-columns:1fr 1fr}
    .pager-btn{max-width:100%}
    .df-table-wrap{display:block;overflow-x:auto;max-width:100%}
    .df-table{min-width:680px}
}
@media (max-width:768px){
    .mini-grid{grid-template-columns:1fr}
    .df-table-wrap{display:block;overflow-x:auto;max-width:100%}
    .df-table{min-width:0;width:100%;table-layout:auto}
    .df-table th{white-space:normal;font-size:12px;padding:9px 10px}
    .df-table td{white-space:normal;word-break:break-word;font-size:12px;padding:9px 10px}
    .df-table td:first-child{white-space:normal}
    .dsec-head{gap:10px}
    .dsec-head .df-ico{width:38px;height:38px}
    .dsec-head .df-ico svg{width:19px;height:19px}
    .case-head{flex-direction:column;gap:8px}
    .df-pager{flex-direction:column;align-items:stretch}
    .pager-btn{max-width:100%;justify-content:center}
    .pager-btn.prev{order:1}.pager-pages{order:2}.pager-btn.next{order:3}
    .sidebar-nav ul{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:6px}
    .sidebar-nav li{flex-shrink:0}
    .sidebar-nav a{white-space:nowrap}
    .sub-hero-pages{gap:6px}
    .ref-item{font-size:12px;padding:10px 12px}
}