/* ===== 共享布局层：折叠式两级目录（主标题 → 副标题）+ 紧凑项目页 =====
   被 index.html 与全部项目详情页引用；详情页不设 body.dash，沿用 style.css 的深色主题。 */

/* ---------------- 左侧目录栏 ---------------- */
.dsb{position:fixed;left:0;top:0;bottom:0;width:208px;z-index:90;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0b2b44 0%,#1a5d7d 100%);overflow-y:auto;overflow-x:hidden}
.dsb::-webkit-scrollbar{width:5px}
.dsb::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:9px}
.dsb-logo{display:flex;align-items:center;gap:10px;padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.13);flex-shrink:0}
.dsb-logo i{width:31px;height:31px;border-radius:9px;background:rgba(255,255,255,.15);font-style:normal;
  font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.dsb-logo b{font-size:13px;line-height:1.35;display:block;color:#fff}
.dsb-logo span{font-size:10.5px;color:rgba(255,255,255,.6)}
.dsb-foot{margin-top:auto;padding:13px 14px;border-top:1px solid rgba(255,255,255,.13);flex-shrink:0;
  font-size:10.8px;color:rgba(255,255,255,.62);line-height:1.9}
.dsb-foot .live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#43d9a3;margin-right:5px}

/* ---------------- 折叠目录（details/summary 原生实现） ---------------- */
.dtoc{padding:9px 9px 0}
.dtoc-g{margin-bottom:3px}
.dtoc-h{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 10px;
  border-radius:9px;font-size:12.6px;font-weight:700;color:rgba(255,255,255,.95);transition:.15s;user-select:none}
.dtoc-h::-webkit-details-marker{display:none}
.dtoc-h:hover{background:rgba(255,255,255,.1)}
.dtoc-g[open]>.dtoc-h{background:rgba(255,255,255,.14)}
.dtoc-h .i{width:17px;text-align:center;font-size:12.5px;flex-shrink:0;opacity:.88}
.dtoc-h .cv{margin-left:auto;font-size:8.5px;opacity:.7;transition:transform .2s}
.dtoc-g[open]>.dtoc-h .cv{transform:rotate(180deg)}
.dtoc-sub{display:flex;flex-direction:column;gap:2px;padding:3px 0 5px}
.dtoc-sub a{display:flex;align-items:center;gap:7px;padding:8px 9px 8px 28px;border-radius:8px;position:relative;
  font-size:12.4px;color:rgba(255,255,255,.8);text-decoration:none;white-space:nowrap;transition:.15s}
.dtoc-sub a::before{content:"";position:absolute;left:16px;top:50%;width:4.5px;height:4.5px;border-radius:50%;
  background:rgba(255,255,255,.4);transform:translateY(-50%)}
.dtoc-sub a:hover{background:rgba(255,255,255,.1);color:#fff}
.dtoc-sub a.on{background:#2c7da0;color:#fff;font-weight:600}
.dtoc-sub a.on::before{background:#fff}
.dtoc-sub a .t{margin-left:auto;font-size:9.2px;padding:1px 5px;border-radius:5px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.72)}

/* ---------------- 主区 ---------------- */
.dsw{margin-left:208px;min-height:100vh;padding:0 26px 42px}
.dsw-in{max-width:1080px;margin:0 auto}

/* ---------------- 紧凑项目页 ---------------- */
.chero{padding:30px 0 18px;border-bottom:1px solid var(--line)}
.chero .crumb{font-size:11.8px;color:var(--mut);margin-bottom:9px}
.chero .crumb a{color:var(--mut);text-decoration:none}
.chero .crumb a:hover{color:var(--teal)}
.chero h1{font-size:26px;font-weight:800;color:var(--txt);line-height:1.32}
.chero h1 span{font-size:14px;font-weight:600}
.chero .lead{font-size:13.2px;color:var(--sub);margin:9px 0 12px;line-height:1.8;max-width:880px}
.chero .tags{display:flex;flex-wrap:wrap;gap:7px}

.cgrid{display:grid;gap:13px;margin-top:18px}
.cgrid.c2{grid-template-columns:1fr 1fr}
.cgrid.c3{grid-template-columns:repeat(3,1fr)}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.ccard h4{font-size:13.6px;font-weight:800;color:var(--txt);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ccard ul{list-style:none;font-size:12.6px;color:var(--sub);line-height:1.8}
.ccard ul li{position:relative;padding-left:12px;margin-bottom:2px}
.ccard ul li::before{content:"";position:absolute;left:2px;top:8.5px;width:4px;height:4px;border-radius:50%;background:var(--teal)}
.ccard p{font-size:12.6px;color:var(--sub);line-height:1.8}

.csec-t{font-size:14.6px;font-weight:800;color:var(--txt);margin:22px 0 11px;display:flex;align-items:center;gap:8px}
.csec-t::before{content:"";width:3px;height:14px;border-radius:3px;background:var(--teal)}

/* 关键步骤：横向流程条 */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.fstep{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 11px}
.fstep b{display:inline-flex;width:19px;height:19px;border-radius:6px;background:rgba(45,212,191,.16);
  color:var(--teal);font-size:10.6px;align-items:center;justify-content:center;font-weight:800;margin-bottom:6px}
.fstep h5{font-size:12.4px;font-weight:700;color:var(--txt);margin-bottom:3px;line-height:1.4}
.fstep p{font-size:11.4px;color:var(--mut);line-height:1.62}

/* 紧凑图库 */
.gal.cgal{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:0}
.gal.cgal .gal-it img{height:130px}
.gal.cgal .cap{font-size:11.2px;padding:7px 9px}

/* 核心代码截图（2~3 张，宽幅、顶部对齐便于看关键片段） */
.gal.cgcode{grid-template-columns:1fr 1fr;gap:12px;margin-top:0}
.gal.cgcode .gal-it img{height:172px;object-position:top}
.gal.cgcode .cap{font-size:11.2px;padding:7px 9px}

/* 成果小卡 */
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cstat{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:11px 9px;text-align:center}
.cstat .n{font-size:18.5px;font-weight:800;color:var(--teal);line-height:1.2}
.cstat .t{font-size:11.2px;color:var(--sub);margin-top:3px;line-height:1.5}

/* 页尾翻页 */
.cfoot{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}

@media (max-width:1100px){
  .cgrid.c3{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:repeat(3,1fr)}
  .cstats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .dsb{position:static;width:100%}
  .dtoc{display:flex;flex-wrap:wrap;gap:6px;padding:8px}
  .dtoc-g{flex:0 0 auto}
  .dtoc-sub{position:absolute;z-index:5;background:#12405c;border-radius:10px;padding:6px;min-width:190px;
    box-shadow:0 14px 34px rgba(0,0,0,.4)}
  .dtoc-g{position:relative}
  .dsw{margin-left:0;padding:15px 16px 34px}
  .chero h1{font-size:21px}
  .cgrid.c2,.cgrid.c3{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .gal.cgal{grid-template-columns:1fr 1fr}
}