#add-to-shelves.dropdown-menu, #remove-from-shelves.dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
}

.tooltip.bottom .tooltip-inner {
  font-size: 13px;
  font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 3px 10px;
  border-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.35);
  opacity: 1;
  white-space: nowrap;
  margin-top: -16px !important;
  line-height: 1.71428571;
  color: #ddd;
}

@font-face {
  font-family: 'Grand Hotel';
  font-style: normal;
  font-weight: 400;
  src: local('Grand Hotel'), local('GrandHotel-Regular'), url("fonts/GrandHotel-Regular.ttf") format('truetype');
}

html.http-error {
  margin: 0;
  height: 100%;
}

body {
  background: #f2f2f2;
  margin-bottom: 40px;
}

.login-entry {
  padding: clamp(24px, 5vw, 72px) 15px 8px;
}

.login-intro {
  max-width: 900px;
  margin-bottom: 24px;
}

.login-kicker {
  margin: 0 0 10px;
  color: #8a6135;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.login-intro h1 {
  max-width: 760px;
  margin: 0 0 14px;
  color: #2f251d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -.025em;
}

.login-lead {
  max-width: 680px;
  margin: 0;
  color: #65584d;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.6;
}

.login-book-wall {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 2vw, 22px);
  margin-top: 30px;
}

.login-book-cover {
  display: block;
  width: clamp(72px, 12vw, 132px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 14px 28px rgba(47, 37, 29, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.login-book-cover:nth-child(1) { transform: rotate(-3deg); }
.login-book-cover:nth-child(2) { transform: translateY(-8px) rotate(1.5deg); }
.login-book-cover:nth-child(3) { transform: rotate(-1deg); }
.login-book-cover:nth-child(4) { transform: rotate(3deg); }
.login-book-cover:hover,
.login-book-cover:focus {
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 36px rgba(47, 37, 29, .28);
  transform: translateY(-12px) rotate(0deg);
}

.login-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#login-panel {
  margin-top: 8px;
}

.navbar-language-option {
  width: 100%;
  padding: 3px 20px;
  color: #333;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.navbar-language-option:hover,
.navbar-language-option:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

@media (max-width: 767px) {
  .login-entry {
    padding-top: 22px;
  }
  .login-book-wall {
    margin-top: 22px;
  }
  .login-book-cover {
    width: clamp(64px, 20vw, 92px);
  }
}

.http-error body {
  margin: 0;
  height: 100%;
  display: table;
  width: 100%;
}

.http-error body > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

body h2 {
  font-weight: normal;
  color: #444;
}

a,
.danger,
.book-remove,
.editable-empty,
.editable-empty:hover { color: #45b29d; }
.book-remove:hover { color: #23527c; }
.user-remove:hover { color: #23527c; }
.btn-default a { color: #444; }
.panel-title > a { text-decoration: none; }

.navigation li a {
  color: #444;
  text-decoration: none;
  display: block;
  padding: 10px;
}

.btn-default a:hover {
  color: #45b29d;
  text-decoration: None;
}

.btn-default:hover {
  color: #45b29d;
}

.editable-click,
a.editable-click,
a.editable-click:hover { border-bottom: None; }

.navigation .nav-head {
  text-transform: uppercase;
  color: #999;
  margin: 20px 0;
}

.navigation .nav-head:nth-child(1n+2) {
  border-top: 1px solid #ccc;
  padding-top: 20px;
}

.book-meta .tags a { display: inline; }
table .bg-primary a { color: #fff; }
table .bg-dark-danger a { color: #fff; }
.book-meta .identifiers a { display: inline; }

.navigation .create-shelf a {
  color: #fff;
  background: #45b29d;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

.navigation li a:hover {
  background: rgba(153, 153, 153, 0.4);
  border-radius: 5px;
}

.navigation li a span { margin-right: 10px; }

.navigation .create-shelf {
  margin: 30px 0;
  font-size: 12px;
  text-align: center;
}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}

.row-fluid.text-center {
    margin-top: -20px;
}

.container-fluid img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.container-fluid .discover { margin-bottom: 50px; }
.container-fluid .new-books { border-top: 1px solid #ccc; }
.container-fluid .new-books h2 { margin: 50px 0 0 0; }

.container-fluid .book {
  margin-top: 20px;
  max-width: 180px;
  display: flex;
  flex-direction: column;
}
.cover { margin-bottom: 10px; }

.container-fluid .book .cover {
  height: 225px;
  position: relative;
}

.author-link img {
  display: block;
  height: 100%;
}

.author-bio img { margin: 0 1em 1em 0; }

.container-fluid .single .cover img {
  border: 1px solid #fff;
  box-sizing: border-box;
  -webkit-box-shadow: 0 5px 8px -6px #777;
  -moz-box-shadow: 0 5px 8px -6px #777;
  box-shadow: 0 5px 8px -6px #777;
}

.datepicker.form-control {
    position: static;
}

.container-fluid .book .cover span .img {
  bottom: 0;
  height: 100%;
  position: absolute;
}

.container-fluid .book .cover span img {
  border: 1px solid #fff;
  position: relative;
  height: 100%;

  box-sizing: border-box;
  -webkit-box-shadow: 0 5px 8px -6px #777;
  -moz-box-shadow: 0 5px 8px -6px #777;
  box-shadow: 0 5px 8px -6px #777;
}

.container-fluid .book .meta { margin-top: 10px; }
.media-body p { text-align: justify; }
.container-fluid .book .meta p { margin: 0; }

.container-fluid .book .meta .title {
  font-weight: bold;
  font-size: 15px;
  color: #444;
}

.container-fluid .book .meta .series {
  font-weight: 400;
  font-size: 12px;
  color: #444;
}

.container-fluid .book .meta .author {
  font-size: 12px;
  color: #999;
}

.container-fluid .book .meta .rating { margin-top: 5px; }
.rating .glyphicon-star-empty { color: #444; }
.rating .glyphicon-star.good { color: #444; }
.rating-clear .glyphicon-remove { color: #333; }

.container-fluid .author .author-hidden,
.container-fluid .author .author-hidden-divider { display: none; }

.navbar-brand {
  font-family: 'Grand Hotel', cursive;
  font-size: 35px;
  color: #45b29d !important;
}

/* R212 品牌圆章。Why 负上 margin：Grand Hotel 是 35px 手写体，字形中线明显低于行框中线，
   直接 vertical-align: middle 会把圆章顶得偏高；此处按 headless Chrome 实测量出的偏移校准。 */
.navbar-brand .brand-mark {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: -6px 8px 0 0;
  vertical-align: middle;
}

.more-stuff {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}

.more-stuff > li { margin-bottom: 10px; }
.navbar-collapse.in .navbar-nav { margin: 0; }

span.glyphicon.glyphicon-tags {
  padding-right: 5px;
  color: #999;
  vertical-align: text-top;
}

.book-meta { padding-bottom: 20px; }

.navbar-default .navbar-toggle .icon-bar { background-color: #000; }
.navbar-default .navbar-toggle { border-color: #000; }

.cover .badge {
  position: absolute;
  top: 2px;
  left: 2px;
  color: #000;
  border-radius: 10px;
  background-color: #fff;
}

.cover .read {
  position: relative;
  top: -20px;
  /*left: auto;
  right: 2px;*/
  width: 17px;
  height: 17px;
  display: inline-block;
  padding: 2px;
}
.cover-height { max-height: 100px; }

.col-sm-2 a .cover-small {
  margin: 5px;
  max-height: 200px;
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

.btn-toolbar .btn,
.discover .btn { margin-bottom: 5px; }
.button-link { color: #fff; }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary { background-color: #1c5484; }

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active { background-color: #89b9e2; }

.btn-toolbar > .btn + .btn,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn + .btn-group,
.btn-toolbar > .btn-group + .btn-group { margin-left: 0; }

.panel-body { background-color: #f5f5f5; }
.spinner { margin: 0 41%; }
.spinner2 { margin: 0 41%; }
.intend-form { margin-left: 20px; }

table .bg-dark-danger {
  background-color: #d9534f;
  color: #fff;
}
table .bg-dark-danger:hover { background-color: #c9302c; }
table .bg-primary:hover { background-color: #1c5484; }
.block-label { display: block; }

.form-control.fake-input {
  position: absolute;
  pointer-events: none;
  top: 0;
}

input.pill {
  position: absolute;
  opacity: 0;
}

input.pill + label {
  border: 2px solid #45b29d;
  border-radius: 15px;
  color: #45b29d;
  cursor: pointer;
  display: inline-block;
  padding: 3px 15px;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input.pill:checked + label {
  background-color: #45b29d;
  border-color: #fff;
  color: #fff;
}

input.pill:not(:checked) + label .glyphicon { display: none; }

.author-link {
  display: inline-block;
  margin-top: 10px;
  width: 100px;
}

#remove-from-shelves .btn,
#shelf-action-errors { margin-left: 5px; }

.tags_click,
.serie_click,
.language_click { margin-right: 5px; }

#meta-info {
  height: 600px;
  overflow-y: scroll;
}

.media-list { padding-right: 15px; }

#meta-info img {
  max-height: 150px;
  max-width: 100px;
  cursor: pointer;
}

.padded-bottom { margin-bottom: 15px; }
.upload-format-input-text { display: initial; }
#btn-upload-format { display: none; }
.upload-cover-input-text { display: initial; }
#btn-upload-cover { display: none; }

.editable-buttons {
  display: inline-block;
  margin-left: 7px;
}

.editable-input { display: inline-block; }

.editable-cancel {
  margin-bottom: 0 !important;
  margin-left: 7px !important;
}

.editable-submit { margin-bottom: 0 !important; }
.filterheader { margin-bottom: 20px; }
.errorlink { margin-top: 20px; }
.emailconfig { margin-top: 10px; }

.modal-body .comments {
  max-height: 300px;
  overflow-y: auto;
}

div.log {
  font-family: Courier New, serif;
  font-size: 12px;
  box-sizing: border-box;
  height: 700px;
  overflow-y: scroll;
  border: 1px solid #ddd;
  white-space: nowrap;
  padding: 0.5em;
}

.badge-sm{
    font-size: 70%;
}
#detailcover { cursor:zoom-in; }
#detailcover:-webkit-full-screen { cursor:zoom-out; border: 0; }
#detailcover:-moz-full-screen { cursor:zoom-out; border: 0; }
#detailcover:-ms-fullscreen { cursor:zoom-out; border: 0; }
#detailcover:fullscreen { cursor:zoom-out; border: 0; }

.error-list {
    margin-top: 5px;
  }

body > div.container-fluid > div.row-fluid > div.col-sm-10 {
  max-height: calc(100vh - 111px);
  overflow-y: auto;
}

body > div.container-fluid > div.row-fluid > div.col-sm-2 {
  max-height: calc(100vh - 111px);
  overflow-y: auto;
  /* hide scrollbar in IE, Edge */
  -ms-overflow-style: none;

  /* hide scrollbar in Firefox */
  scrollbar-width: none;
}

/* hide scrollbar in WebKit browsers (Chrome, Safari, Opera) */
body > div.container-fluid > div.row-fluid > div.col-sm-2::-webkit-scrollbar {
  display: none;
}

.scrollable-col {
  /* keep vertical scrolling */
  overflow-y: auto;

  /* hide scrollbar in IE, Edge */
  -ms-overflow-style: none;

  /* hide scrollbar in Firefox */
  scrollbar-width: none;
}

/* hide scrollbar in WebKit browsers (Chrome, Safari, Opera) */
.scrollable-col::-webkit-scrollbar {
  display: none;
}

body > div.container-fluid  {
  padding-right: 0px;
}

/* ============================================================
   R213-A 首页导航与外壳（PJM MB-16）
   ============================================================ */

/* ── 1. 「创建书架」900px 视口裁切修复 ─────────────────────────
   Why：侧栏 .navigation 无滚动容器，书架一多整列超过视口高度，底部的
   「创建书架」被推出屏幕且无法滚动到达（QA §三.2）。给导航列一个
   「视口高减顶栏」的上限 + 纵向滚动即可，不改变任何视觉样式。 */
@media (min-width: 768px) {
  .navigation {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* ── 2. 排序 chips：文字标签 + 窄屏抽屉 ──────────────────────
   chips 的 .chip-label 在 index.html 内；窄屏（<768px）整排收进
   Bootstrap collapse 抽屉，由「筛选与排序」按钮开合。桌面端强制
   展开（collapse 类默认隐藏内容，媒体查询覆盖回 block）。 */
.filter-chips .chip-label { margin-left: 4px; }
.filter-toggle { margin-bottom: 10px; }
@media (min-width: 768px) {
  .filter-chips.collapse {
    display: block;
    height: auto;
    visibility: visible;
  }
  .filter-chips.collapsing { height: auto; }
}
@media (max-width: 767px) {
  /* 抽屉态：竖排、整行宽，触控友好 */
  .filter-chips .btn {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    text-align: left;
  }
}

/* ── 3. 卡片格式徽标（EPUB / PDF / 音频） ────────────────────
   定位在封面图左下角的小胶囊；.img 需相对定位作锚点。 */
.book .cover .img,
.random-books .cover .img { position: relative; }

.cover-badges {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  pointer-events: none; /* 不挡封面点击 */
}

.cover-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 1.5;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}

.cover-badge-audio { background: rgba(69, 178, 157, 0.9); }

/* ── 4. 移动端底部导航（书架 / 学习 / 我的） ─────────────────
   仅 xs 显示（模板里自带 visible-xs）；固定底栏三列等分，正文在
   窄屏下补 padding 以免最后一行内容被栏遮住。 */
@media (max-width: 767px) {
  body { padding-bottom: 54px; }
}

.mb-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030; /* 与顶栏同级，始终可达 */
  display: flex;
  background: #f8f8f8;
  border-top: 1px solid #ddd;
}

.mb-bottom-item {
  flex: 1;
  padding: 8px 0 6px;
  text-align: center;
  color: #777;
  text-decoration: none;
  font-size: 18px;
}

.mb-bottom-item .mb-bottom-label {
  display: block;
  font-size: 11px;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-bottom-item.active,
.mb-bottom-item:hover,
.mb-bottom-item:focus {
  color: #45b29d;
  text-decoration: none;
}

/* ---------------- 首页 /home（R213-C / MB-18） ----------------
   四块纵向排列：继续阅读 / 今日计划 / 分级推荐 / 随机发现。
   卡片样式复用书库列表的 .book，这里只补模块间距与「继续阅读」的进度条。 */

.home-page {
  padding: 12px 0 24px;
}

.home-section {
  margin-bottom: 28px;
}

.home-section-title {
  font-size: 20px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.home-level-group {
  margin-bottom: 18px;
}

.home-level-label {
  font-size: 15px;
  color: #45b29d;
  margin: 0 0 10px;
  font-weight: 600;
}

/* 继续阅读：进度条压在书名下方，卡片高度与书库卡一致 */
.home-progress {
  margin-top: 6px;
}

.home-progress-pages {
  display: block;
  font-size: 12px;
  color: #777;
  margin-bottom: 4px;
}

.home-progress-bar {
  display: block;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.home-progress-bar > span {
  display: block;
  height: 100%;
  background: #45b29d;
}

/* 今日计划卡 */
.home-plan-card {
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 14px 16px;
}

.home-plan-line {
  font-size: 16px;
  margin: 0 0 8px;
  color: #333;
}

.home-plan-cell strong {
  font-size: 20px;
  color: #45b29d;
  margin-right: 2px;
}

.home-plan-sep {
  margin: 0 10px;
  color: #bbb;
}

/* 两块都取不到时的降级文案：不是错误红，而是「暂时」的中性提示 + 仍然可点的链接 */
.home-plan-degraded {
  color: #777;
  font-size: 14px;
}

.home-plan-link {
  font-size: 13px;
}