/* Library Grid */
.book-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   max-height: 1000px;
   overflow-y: auto;
   padding: 4px;
}

.series-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
   max-height: 800px;
   overflow-y: auto;
   padding: 4px;
}

@media (max-width:800px) {
   .book-grid {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      max-height: 500px;
   }

   .series-grid {
      display: grid;
      grid-template-columns: 1fr;
      max-height: 550px;
   }
}

.book-grid a,
.book-grid a:hover,
.series-grid a,
.series-grid a:hover {
   text-decoration: none;
   font-weight: normal;
}

.book,
.series {
   display: flex;
   flex-direction: column;
   gap: 5px;
   min-width: 0;
   padding: 7px 7px 9px;
   border-radius: 3px;
   background: var(--bg-light);
}

.book:hover,
.series:hover {
   border-color: var(--border);
   background: var(--accent-extra);
   font-style: normal;
   transform: translateY(-4px);
}

.book-cover,
.series-cover {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: auto;
   border-radius: 2px;
}

.book-cover img {
   display: block;
   width: 100%;
   height: 210px;
   object-fit: cover;
}

.series-cover img {
   display: block;
   width: 100%;
   height: 200px;
   object-fit: cover;
}

@media (max-width:800px) {
   .book-cover img {
      height: 200px;
      width: 130px;
      object-fit: cover;
   }
}

.book-info,
.series-info {
   display: flex;
   flex-direction: column;
   gap: 1px;
   font-size: 12px;
   font-style: bold;
   color: var(--text);
   line-height: 1.25;
   text-align: center;
}

.book-info b,
.series-info b {
   font-size: 12px;
   line-height: 1.2;
}

.book-stars,
.rating {
   display: block;
   min-height: 13px;
   color: var(--accent);
   font-size: 11px;
   line-height: 1.1;
   letter-spacing: 0;
}

.book-stars:empty,
.rating:empty {
   display: none;
   min-height: 0;
}

/* Tags and Filter */
.tag-list {
   display: flex;
   align-items:center;
   flex-wrap: wrap;
   gap: 8px;
}

.tag-button {
   background: var(--accent-extra);
   color: var(--text);
   border: 0.2px solid var(--border);
   padding: 5px 8px;
   border-radius: 8px;
   font-size: 13px;
   font-family: var(--font-body);
}

.tag-button:hover {
   background: var(--accent-dim);
   color: var(--box-bg);
}

.tag-button.active {
   background: var(--accent);
   color: var(--box-bg);
}