/* HyMd 共享：步骤图库 + 点击放大（仅在用到的页面引用） */
.shotg{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;counter-reset:sg}
.shotg.cols-3{grid-template-columns:repeat(3,1fr)}
.shotg.cols-4{grid-template-columns:repeat(4,1fr)}
.shotg li{counter-increment:sg;display:flex;flex-direction:column;gap:10px;min-width:0}
.shotg a.lb{display:block;position:relative;border:1px solid var(--border,#E5E5E5);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s,transform .15s;cursor:zoom-in}
.shotg a.lb:hover{border-color:var(--accent,#005FB8);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-1px)}
.shotg a.lb img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;display:block}
.shotg a.lb::after{content:"";position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005FB8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 1px 3px rgba(0,0,0,.12);opacity:0;transition:opacity .15s}
.shotg a.lb:hover::after,.shotg a.lb:focus-visible::after{opacity:1}
.shotg .cap{font-size:14px;line-height:1.65;color:var(--text,#3B3B3B);display:flex;gap:10px;align-items:flex-start}
.shotg .cap::before{content:counter(sg);flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#0060E0,#0090F0);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.shotg .cap code{font-family:var(--mono,monospace);font-size:.9em;background:#F0F0F0;padding:0 4px;border-radius:4px}
.shotg-note{margin-top:14px;font-size:13.5px;color:var(--muted,#6E6E6E)}
.shot-fig{margin:0}
.shot-fig a.lb{display:block;cursor:zoom-in;border:1px solid var(--border,#E5E5E5);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
.shot-fig img{width:100%;height:auto;display:block}
.shot-fig figcaption{font-size:13.5px;color:var(--muted,#6E6E6E);margin-top:8px}

/* 灯箱 */
.lbx{position:fixed;inset:0;z-index:1000;background:rgba(18,22,28,.92);display:none;flex-direction:column;align-items:center;justify-content:center;padding:56px 72px 24px}
.lbx.open{display:flex}
.lbx figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:0}
.lbx img{max-width:100%;max-height:calc(100vh - 150px);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.4);background:#fff;object-fit:contain}
.lbx figcaption{color:#E8ECF1;font-size:15px;line-height:1.6;text-align:center;max-width:900px}
.lbx figcaption b{color:#8CC4FF;margin-right:8px;font-weight:600}
.lbx button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font:inherit}
.lbx button:hover{background:rgba(255,255,255,.24)}
.lbx button:focus-visible{outline:2px solid #8CC4FF;outline-offset:2px}
.lbx .lbx-close{top:12px;right:14px}
.lbx .lbx-prev{left:14px;top:50%;margin-top:-22px}
.lbx .lbx-next{right:14px;top:50%;margin-top:-22px}
.lbx svg{width:22px;height:22px}
body.lbx-lock{overflow:hidden}
@media (max-width:1024px){.shotg.cols-4{grid-template-columns:repeat(2,1fr)}.shotg.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .shotg,.shotg.cols-3,.shotg.cols-4{grid-template-columns:1fr}
  .lbx{padding:56px 8px 16px}
  .lbx .lbx-prev,.lbx .lbx-next{top:auto;bottom:14px;margin-top:0}
  .lbx img{max-height:calc(100vh - 200px)}
  .lbx figcaption{font-size:14px;padding:0 48px}
}