.reader-shell{position:relative;overflow:hidden}
.reader-main{padding:22px 24px 30px;margin-right:0;transition:all .2s}
.reader-title{margin:0 0 10px;font-size:28px;font-weight:700;text-align:center}
.reader-meta{font-size:13px;color:#888;text-align:center;margin-bottom:18px}
.reader-meta span{margin:0 8px}
.reader-content{font-size:18px;line-height:2;color:#333;word-break:break-all}
.reader-content p{text-indent:2em;margin:0 0 14px}
.reader-nav{padding:12px 0;text-align:center}
.reader-nav .btn{margin:0 6px 8px}
.reader-breadcrumb{padding:10px 24px 0}
.reader-breadcrumb .breadcrumb{
  margin:0;
  padding:0;
  background:transparent;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.reader-breadcrumb .breadcrumb>li{
  float:none;
  flex:0 0 auto;
  white-space:nowrap;
}
.reader-breadcrumb .breadcrumb>li.active{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#999;
}
.reader-toolbar{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:50}
.reader-toolbar .btn{display:block;width:96px;margin-bottom:8px}
.reader-toolbar .btn:last-child{margin-bottom:0}
.reader-panel-mask{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.24);z-index:35;display:none}
.reader-panel-mask.open{display:block}
.reader-panel{position:fixed;right:-360px;top:0;height:100vh;width:340px;background:#fff;border-left:1px solid #eee;box-shadow:-4px 0 20px rgba(0,0,0,.08);z-index:40;transition:right .2s}
.reader-panel.open{right:0}
.reader-panel-header{padding:14px 16px;border-bottom:1px solid #f1f1f1;font-size:16px;font-weight:600}
.reader-panel-body{padding:14px 16px;height:calc(100vh - 54px);overflow-y:auto}
.reader-catalog-list{list-style:none;padding:0;margin:0}
.reader-catalog-list li{border-bottom:1px dashed #eee}
.reader-catalog-list li a{display:block;padding:10px 4px;color:#666}
.reader-catalog-list li a.active{color:#0aa4f7;font-weight:600}
.reader-setting-row{margin-bottom:14px}
.reader-setting-row .label{display:block;color:#666;margin-bottom:6px}
.reader-theme-btn{display:inline-block;border:1px solid #ddd;padding:4px 8px;border-radius:12px;margin:0 6px 6px 0;cursor:pointer}
.reader-theme-btn.active{border-color:#0aa4f7;color:#0aa4f7}
.reader-width-select{width:100%;padding:6px;border:1px solid #ddd;border-radius:4px}
.reader-font-size-text{margin:0 8px}
.theme-0 .reader-main{background:#ffffff}
.theme-1 .reader-main{background:#f7f3e8}
.theme-2 .reader-main{background:#eef8ef}
.theme-3 .reader-main{background:#eef5ff}
.theme-4 .reader-main{background:#f8f1f7}
.theme-5 .reader-main{background:#222;color:#ddd}
.theme-5 .reader-content{color:#ddd}
.width-640 .reader-main{max-width:640px;margin:0 auto}
.width-800 .reader-main{max-width:800px;margin:0 auto}
.width-900 .reader-main{max-width:900px;margin:0 auto}
.width-1200 .reader-main{max-width:1200px;margin:0 auto}
.reader-comment-box{padding:12px 14px}
@media (max-width: 991px){
  .reader-toolbar{right:8px}
  .reader-toolbar .btn{width:76px;padding:4px 6px}
}
@media (max-width: 768px){
  .reader-main{padding:16px 14px 24px}
  .reader-title{font-size:22px}
  .reader-content{font-size:16px}
  .reader-panel{width:88vw;right:-90vw}
  .reader-breadcrumb{padding:8px 10px 0}
  .reader-breadcrumb .breadcrumb{font-size:13px;line-height:1.4}
  .reader-breadcrumb .breadcrumb>li+li:before{padding:0 3px}
  .reader-breadcrumb .breadcrumb>li>a{
    display:inline-block;
    max-width:4.5em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:bottom;
  }
  .reader-toolbar{top:50%;right:8px;left:auto;bottom:auto;transform:translateY(-50%);z-index:45}
  .reader-toolbar .btn{width:66px;margin-bottom:6px;padding:4px 6px}
  .reader-comment-box{display:none}
  .reader-nav .btn-comment-entry{display:none}
  #btnOpenMobile{display:none}
}