/* ERBI Media 帮助中心：手机版竖版书架（只在 ≤820px 生效，电脑版不受影响） */
.mshelf{display:none}
@media (max-width:820px){
  .shelf-m.has-mshelf{display:none!important}
  .mshelf{display:block;margin:4px 0 8px;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
  .mshelf svg{width:100%;height:auto;display:block;overflow:visible}
  .mshelf .ln{fill:none;stroke:#111;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:stroke .3s,fill .3s}
  .mshelf .thin{stroke-width:1}.mshelf .dash{stroke-dasharray:5 4}
  .mshelf .wall{fill:#f3f3f3}
  .mshelf .ink{fill:#111;transition:fill .3s}
  .mshelf .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:msDraw 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards}
  @keyframes msDraw{to{stroke-dashoffset:0}}
  .mshelf .deco{opacity:0;animation:msFade .5s ease .7s forwards}
  @keyframes msFade{to{opacity:1}}
  .mshelf .mbox{opacity:0;animation:msRise .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
  @keyframes msRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .mshelf .front{fill:#f6f6f6;transition:fill .3s,stroke .3s}
  .mshelf .pp{fill:#fff;stroke:#111;stroke-width:1.2;transition:stroke .3s}
  .mshelf .lbl{font:500 17px -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;fill:#111;transition:fill .3s}
  .mshelf .sub{font:12px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;fill:#888;letter-spacing:.04em}
  .mshelf .side{stroke-dasharray:4 4;stroke-width:1;transition:opacity .3s}
  .mshelf .pull,.mshelf .paper{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .mshelf .mbox.off .front{stroke-dasharray:5 4;fill:#fafafa}
  .mshelf .mbox.off .lbl{fill:#999}
  .mshelf .mbox.off .ln,.mshelf .mbox.off .pp{stroke:#b5b5b5}
  /* 按住：盒子拉出、东西弹起，其它盒子变灰 */
  .mshelf .mbox.is-on .pull{transform:translateY(10px) scale(1.06)}
  .mshelf .mbox.is-on .front{fill:#fff}
  .mshelf .mbox.is-on .side{opacity:.2}
  .mshelf .mbox.is-on .p1{transform:translate(-8px,-24px) rotate(-7deg)}
  .mshelf .mbox.is-on .p2{transform:translate(10px,-30px) rotate(6deg);transition-delay:.05s}
  .mshelf .mbox.is-on .p3{transform:translate(0,-18px) rotate(-2deg);transition-delay:.1s}
  .mshelf.has-on .mbox:not(.is-on) .front{fill:#f1f1f1;stroke:#c4c4c4}
  .mshelf.has-on .mbox:not(.is-on) .lbl{fill:#b0b0b0}
  .mshelf.has-on .mbox:not(.is-on) .ln,.mshelf.has-on .mbox:not(.is-on) .pp{stroke:#cfcfcf}
  .mshelf.has-on .mbox:not(.is-on) .ink{fill:#cfcfcf}
  .mshelf .mbox.off.is-on .pull{animation:msNo .4s ease}
  .mshelf .mbox.off.is-on .pull{transform:none}
  @keyframes msNo{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
  .mshelf .hint{text-align:center;font-size:12px;color:#999;margin-top:8px;opacity:0;animation:msFade .5s ease 1.6s forwards}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .mshelf *{animation:none!important;transition:none!important}
  .mshelf .draw{stroke-dashoffset:0}.mshelf .mbox,.mshelf .deco,.mshelf .hint{opacity:1}
}