/* ============================================================
   defense-strategy.css — 「勒索软件防御策略」子课题专题样式（分页版）
   与 ../../style.css 设计令牌完全兼容；所有图标由 defense-strategy.js 注入 SVG
   ============================================================ */

/* ---------- 页头（含 JS Canvas 背景） ---------- */
.ds-page-header{position:relative;overflow:hidden;background:linear-gradient(180deg,#f0f5ff 0%,#ffffff 100%);}
#dsCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;}
.ds-page-header .container{position:relative;z-index:2;}
.ds-version-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.ds-version-chips .chip{font-size:12px;font-weight:600;color:var(--primary);background:rgba(255,255,255,.85);border:1px solid rgba(26,110,255,.18);padding:5px 14px;border-radius:100px;backdrop-filter:blur(6px);}

/* ---------- 分部分导航 ---------- */
.ds-part-nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:72px;z-index:500;box-shadow:0 2px 10px rgba(0,0,0,.03);}
.ds-part-nav .container{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:12px;padding-bottom:12px;}
.ds-part-nav a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-secondary);text-decoration:none;padding:7px 14px;border-radius:100px;border:1.5px solid var(--border);transition:var(--transition);background:#fff;}
.ds-part-nav a .no{font-size:11px;color:var(--text-light);font-weight:800;}
.ds-part-nav a:hover{border-color:var(--primary);color:var(--primary);}
.ds-part-nav a.current{background:var(--primary-gradient);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(26,110,255,.25);}
.ds-part-nav a.current .no{color:rgba(255,255,255,.85);}

/* ---------- 本部分目录 ---------- */
.ds-toc{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px;margin:0 0 44px;}
.ds-toc-title{font-size:14px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--text);}
.ds-toc .ds-ic{width:22px;height:22px;color:var(--primary);display:inline-flex;}
.ds-toc .ds-ic svg{width:22px;height:22px;}
.ds-toc ol{columns:2;column-gap:36px;margin:0;padding-left:22px;}
.ds-toc li{font-size:13.5px;margin-bottom:7px;break-inside:avoid;}
.ds-toc a{color:var(--text-secondary);text-decoration:none;}
.ds-toc a:hover{color:var(--primary);text-decoration:underline;}

/* ---------- 章节标题 ---------- */
.ds-sec-head{margin-bottom:34px;}
.ds-sec-head .ds-sec-no{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:2px;color:var(--primary);background:var(--primary-light);padding:4px 14px;border-radius:100px;margin-bottom:12px;}
.ds-sec-head h2{font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--text);line-height:1.3;margin-bottom:10px;}
.ds-sec-head .ds-sec-lead{font-size:15px;color:var(--text-secondary);line-height:1.95;max-width:880px;}
.ds-h3{font-size:18px;font-weight:700;margin:38px 0 14px;display:flex;align-items:center;gap:8px;color:var(--text);}
.ds-h3::before{content:'';width:4px;height:18px;background:var(--primary-gradient);border-radius:2px;flex-shrink:0;}
.ds-h4{font-size:15.5px;font-weight:700;margin:24px 0 10px;color:var(--text);}
.ds-p{font-size:14.5px;color:var(--text-secondary);line-height:2;margin-bottom:14px;max-width:930px;}
.ds-p strong,.ds-li strong,.ds-ol strong{color:var(--text);}
.ds-ul{margin:0 0 16px;padding-left:2px;list-style:none;}
.ds-li{font-size:14px;color:var(--text-secondary);line-height:1.95;padding-left:20px;position:relative;margin-bottom:8px;}
.ds-li::before{content:'';position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--primary);opacity:.55;}
.ds-ol{counter-reset:dsol;margin:0 0 18px;padding:0;list-style:none;}
.ds-ol li{counter-increment:dsol;position:relative;padding-left:40px;margin-bottom:12px;font-size:14px;color:var(--text-secondary);line-height:1.95;}
.ds-ol li::before{content:counter(dsol,decimal-leading-zero);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:8px;background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}

/* ---------- 引用标注 ---------- */
sup.ds-ref{font-size:10.5px;font-weight:700;color:var(--primary);background:var(--primary-light);border-radius:4px;padding:1px 5px;margin:0 2px;white-space:nowrap;}

/* ---------- 提示框 ---------- */
.ds-callout{display:flex;gap:14px;border-radius:var(--radius);padding:18px 20px;margin:22px 0;border:1px solid;font-size:14px;line-height:1.95;}
.ds-callout .ds-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ds-callout .ds-ic svg{width:20px;height:20px;}
.ds-callout .ds-callout-body{flex:1;min-width:0;}
.ds-callout .ds-callout-body strong{display:inline-block;margin-bottom:4px;font-size:14.5px;}
.ds-callout.info{background:#eff6ff;border-color:rgba(26,110,255,.2);color:#1e3a8a;}
.ds-callout.info .ds-ic{background:#dbeafe;color:#1a6eff;}
.ds-callout.warning{background:#fffbeb;border-color:rgba(217,119,6,.25);color:#92400e;}
.ds-callout.warning .ds-ic{background:#fef3c7;color:#d97706;}
.ds-callout.danger{background:#fef2f2;border-color:rgba(220,38,38,.22);color:#7f1d1d;}
.ds-callout.danger .ds-ic{background:#fee2e2;color:#dc2626;}
.ds-callout.success{background:#f0fdf4;border-color:rgba(22,163,74,.22);color:#14532d;}
.ds-callout.success .ds-ic{background:#dcfce7;color:#16a34a;}

/* ---------- 卡片 ---------- */
.ds-grid{display:grid;gap:18px;margin:22px 0;}
.ds-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.ds-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.ds-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.ds-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:var(--transition);}
.ds-card:hover{border-color:rgba(26,110,255,.25);box-shadow:var(--shadow-hover);transform:translateY(-3px);}
.ds-card .ds-card-ic{width:44px;height:44px;border-radius:12px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.ds-card .ds-card-ic svg{width:22px;height:22px;}
.ds-card h5{font-size:15px;font-weight:700;margin-bottom:8px;}
.ds-card p{font-size:13.5px;color:var(--text-secondary);line-height:1.9;margin:0;}

/* ---------- 统计 ---------- */
.ds-kv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0;}
.ds-kv{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 16px;text-align:center;position:relative;overflow:hidden;}
.ds-kv::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary-gradient);}
.ds-kv .ds-kv-num{font-size:30px;font-weight:900;color:var(--primary);line-height:1.1;}
.ds-kv .ds-kv-num small{font-size:14px;font-weight:600;color:var(--text-light);margin-left:2px;}
.ds-kv .ds-kv-label{font-size:12.5px;color:var(--text-secondary);margin-top:8px;font-weight:600;line-height:1.5;}
.ds-kv .ds-kv-sub{font-size:11px;color:var(--text-light);margin-top:4px;line-height:1.5;}

/* ---------- 表格 ---------- */
.ds-table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--border);border-radius:var(--radius);background:#fff;-webkit-overflow-scrolling:touch;}
table.ds-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:660px;}
table.ds-table caption{caption-side:top;text-align:left;font-size:13px;font-weight:700;color:var(--text);padding:14px 18px 10px;background:#fff;}
table.ds-table th{background:#f5f8ff;color:var(--text);font-weight:700;text-align:left;padding:12px 16px;border-bottom:2px solid var(--border);white-space:nowrap;}
table.ds-table td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary);line-height:1.8;vertical-align:top;}
table.ds-table tr:last-child td{border-bottom:none;}
table.ds-table tr:hover td{background:#fafcff;}
table.ds-table td strong{color:var(--text);}
.ds-td-num{font-weight:800;color:var(--primary);white-space:nowrap;}

/* ---------- 框架图 ---------- */
.ds-fig{border:1px solid var(--border);border-radius:var(--radius);padding:26px;background:linear-gradient(180deg,#fbfdff,#fff);margin:22px 0;}
.ds-fig-title{text-align:center;font-size:14px;font-weight:800;color:var(--text);margin-bottom:18px;}
.ds-fig-axis{background:var(--primary-gradient);color:#fff;border-radius:12px;padding:12px 18px;text-align:center;font-weight:700;font-size:14px;margin:0 auto 14px;max-width:620px;box-shadow:0 6px 18px rgba(26,110,255,.25);}
.ds-fig-wings{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.ds-fig-wing{border:1.5px dashed rgba(26,110,255,.35);border-radius:12px;padding:14px;text-align:center;font-size:13px;font-weight:700;color:var(--primary);background:rgba(26,110,255,.04);line-height:1.8;}
.ds-fig-wings{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.ds-fig-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px;}
.ds-fig-layer{border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;background:#fff;}
.ds-fig-layer b{display:block;font-size:14px;margin-bottom:4px;color:var(--text);}
.ds-fig-layer span{font-size:12px;color:var(--text-light);line-height:1.7;display:block;}
.ds-fig-domains{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.ds-fig-domain{background:var(--primary-light);color:var(--primary);font-size:12.5px;font-weight:700;border-radius:10px;padding:10px 6px;text-align:center;line-height:1.5;}

/* ---------- 步骤 / 清单 ---------- */
.ds-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0;}
.ds-step{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.ds-step .ds-step-no{width:34px;height:34px;border-radius:10px;background:var(--primary-gradient);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:12px;}
.ds-step .ds-step-tag{font-size:11px;font-weight:800;letter-spacing:1px;color:#dc2626;background:#fef2f2;padding:3px 10px;border-radius:100px;display:inline-block;margin-bottom:10px;}
.ds-step h5{font-size:15.5px;font-weight:700;margin-bottom:10px;}
.ds-step ul{list-style:none;margin:0;padding:0;}
.ds-step li{font-size:13.5px;color:var(--text-secondary);line-height:1.85;padding-left:16px;position:relative;margin-bottom:8px;}
.ds-step li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;background:#dc2626;border-radius:50%;opacity:.55;}
.ds-step li:last-child{margin-bottom:0;}
.ds-step li strong{color:var(--text);}
.ds-checklist{list-style:none;margin:14px 0;padding:0;}
.ds-checklist li{position:relative;padding-left:30px;font-size:14px;color:var(--text-secondary);line-height:1.9;margin-bottom:10px;}
.ds-checklist li::before{content:'';position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:6px;background:var(--success-light);border:1.5px solid #86efac;}
.ds-checklist li::after{content:'';position:absolute;left:5px;top:9px;width:8px;height:5px;border-left:2px solid #16a34a;border-bottom:2px solid #16a34a;transform:rotate(-45deg);}
.ds-checklist.warn li::before{background:#fef2f2;border-color:#fca5a5;}
.ds-checklist.warn li::after{border-color:#dc2626;}

/* ---------- 引用块 ---------- */
.ds-quote{border-left:4px solid var(--primary);background:#fafcff;border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:16px 20px;margin:18px 0;font-size:14px;color:var(--text-secondary);line-height:1.95;}
.ds-quote footer{font-size:12px;color:var(--text-light);margin-top:8px;font-weight:500;}
.ds-src{font-size:12px;color:var(--text-light);margin-top:10px;font-weight:500;}

/* ---------- 标签 ---------- */
.ds-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.ds-tags span{font-size:12.5px;font-weight:600;color:var(--primary);background:var(--primary-light);padding:5px 14px;border-radius:100px;}

/* ---------- 成熟度 ---------- */
.ds-meter{display:flex;gap:8px;margin:18px 0;}
.ds-meter .lv{flex:1;height:10px;border-radius:6px;background:var(--bg-warm);border:1px solid var(--border);}
.ds-meter .lv.on{background:var(--primary-gradient);border-color:transparent;}

/* ---------- FAQ ---------- */
.ds-faq details{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;margin-bottom:12px;overflow:hidden;}
.ds-faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:14.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px;position:relative;transition:var(--transition);}
.ds-faq summary::-webkit-details-marker{display:none;}
.ds-faq summary::after{content:'+';position:absolute;right:18px;font-size:18px;color:var(--primary);font-weight:400;transition:transform .3s;}
.ds-faq details[open] summary::after{transform:rotate(45deg);}
.ds-faq details[open] summary{border-bottom:1px solid var(--border);background:#fafcff;}
.ds-faq .ds-faq-body{padding:16px 20px;font-size:14px;color:var(--text-secondary);line-height:1.95;}

/* ---------- 分页按钮 ---------- */
.ds-pager-section{padding:36px 0 80px;}
.ds-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;}
.ds-pager-btn{display:flex;flex-direction:column;justify-content:center;gap:3px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 22px;text-decoration:none;transition:var(--transition);}
.ds-pager-btn:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.ds-pager-btn .ds-dir{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--primary);}
.ds-pager-btn .ds-dir svg{width:14px;height:14px;}
.ds-pager-btn strong{font-size:14.5px;color:var(--text);line-height:1.5;}
.ds-pager-btn span{font-size:12px;color:var(--text-light);font-weight:500;}
.ds-pager-btn.next{text-align:right;background:linear-gradient(135deg,#f5f9ff,#fff);}
.ds-pager-btn.next .ds-dir{justify-content:flex-end;}
.ds-pager-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px;}
.ds-pager-dots{display:flex;gap:6px;margin-bottom:6px;}
.ds-pager-dots i{width:8px;height:8px;border-radius:50%;background:var(--border);}
.ds-pager-dots i.on{background:var(--primary);}
.ds-pager-center em{font-style:normal;font-size:12px;color:var(--text-light);font-weight:600;white-space:nowrap;}

/* ---------- 按钮 ---------- */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:12px;background:var(--primary-gradient);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:var(--transition);border:none;cursor:pointer;font-family:inherit;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,110,255,.3);}
.ds-center{text-align:center;margin:28px 0;}

/* ---------- 返回顶部 ---------- */
.ds-top{position:fixed;right:22px;bottom:26px;width:44px;height:44px;border-radius:12px;background:var(--primary-gradient);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(26,110,255,.35);opacity:0;transform:translateY(12px);pointer-events:none;transition:var(--transition);z-index:900;}
.ds-top.show{opacity:1;transform:none;pointer-events:auto;}
.ds-top svg{width:20px;height:20px;}
.ds-top:hover{transform:translateY(-3px);}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .ds-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .ds-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .ds-kv-grid{grid-template-columns:repeat(2,1fr);}
  .ds-fig-domains{grid-template-columns:repeat(3,1fr);}
  .ds-part-nav{top:72px;}
}
@media (max-width:768px){
  .ds-grid.cols-2,.ds-grid.cols-3,.ds-grid.cols-4{grid-template-columns:1fr;}
  .ds-kv-grid{grid-template-columns:repeat(2,1fr);}
  .ds-kv .ds-kv-num{font-size:24px;}
  .ds-fig-wings,.ds-fig-layers{grid-template-columns:1fr;}
  .ds-fig-domains{grid-template-columns:repeat(2,1fr);}
  .ds-steps{grid-template-columns:1fr;}
  .ds-pager{grid-template-columns:1fr;}
  .ds-pager-center{order:-1;flex-direction:row;gap:12px;padding:6px 0;}
  .ds-callout{flex-direction:column;gap:10px;}
  .ds-toc ol{columns:1;}
  table.ds-table{min-width:600px;font-size:12.5px;}
  .ds-h3{font-size:16.5px;}
  .ds-p{font-size:14px;line-height:1.95;}
  .ds-part-nav .container{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ds-part-nav a{white-space:nowrap;}
}
/* ============================================================
   移动端导航与页脚适配（补齐 style.css 中依赖 ransomware.css 的断点）
   ============================================================ */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    /* 顶部导航：折叠为汉堡菜单下拉 */
    .nav-links {
        display: none;
        position: absolute;
        top: 72px;
        left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px 16px;
        box-shadow: 0 12px 28px rgba(0,0,0,.10);
        gap: 2px;
        border-bottom: 1px solid var(--border);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }
    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 13px 16px; border-radius: 10px; font-size: 15px; }
    .mobile-toggle { display: flex; }
    /* 页脚：单列堆叠 */
    .footer { padding: 48px 0 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-brand p { max-width: 100%; }
    /* 页头留白收敛 */
    .page-header { padding: 108px 0 40px; }
    /* 分页导航不遮挡折叠菜单 */
    .ds-part-nav { top: 72px; }
}