/* Library look: warm paper, deep green and brass. Plain CSS (no build step). */
:root { --paper: 247 243 233; --brass: #c9a227; }
:root:not(.dark) body { background-color: rgb(var(--paper)); }

/* Header: dark green bar with a brass rule, like a library sign. */
.lib-header { background: #0b3d38; color: #f3ead2; border-bottom: 3px solid var(--brass); }
.lib-header a, .lib-header button { color: inherit; }
.lib-header .lib-title { color: #f3d98a; font-weight: 700; letter-spacing: .01em; }
.lib-header nav a:hover, .lib-header button:hover { background: rgba(255, 255, 255, .12); }
.lib-header .h-16 { height: 3.25rem; }
.lib-logo { height: 32px; width: auto; }
.lib-header .lib-title { font-size: 1rem; }
.lib-header a.flex { font-size: 1rem; gap: .5rem; }
/* The language dropdown sits on a light/dark card inside the dark header: use normal text colours. */
.lib-header ul, .lib-header ul a { color: rgb(var(--c-fg)); }
.lib-header ul a:hover { background: rgba(127, 127, 127, .18); }
.lib-header ul a.font-bold { color: rgb(var(--c-brand)); }

/* Hero: a slim banner with a compact search bar (the logo is already in the header). */
.lib-hero {
  background: linear-gradient(180deg, #0b3d38 0%, #0a3330 100%);
  color: #f3ead2;
  border-bottom: 3px solid var(--brass);
}
.lib-hero-inner { max-width: 36rem; margin-inline: auto; padding: 1.25rem 1rem 1rem; text-align: center; }
.lib-hero-title { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: #f3d98a; }
.lib-hero-sub { margin-top: .25rem; font-size: .95rem; opacity: .8; }
.lib-search {
  display: flex; gap: .35rem; margin-top: .75rem; padding: .25rem;
  background: #fff; border-radius: .6rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.lib-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #1c2321; padding: .4rem .6rem; font-size: .95rem; }
.lib-search button { padding: .35rem 1rem; border-radius: .45rem; background: var(--brass); color: #1c2321; font-weight: 600; font-size: .9rem; }
.lib-hero-count { margin-top: .5rem; font-size: .8rem; opacity: .65; }
@media (min-width: 768px) { .lib-hero-title { font-size: 1.75rem; } }

/* Section headings with a brass ornament */
.lib-heading { display: flex; align-items: center; gap: .75rem; font-weight: 700; }
.lib-heading::after { content: ""; flex: 1; height: 2px; background: linear-gradient(to right, var(--brass), transparent); }
[dir="rtl"] .lib-heading::after { background: linear-gradient(to left, var(--brass), transparent); }

/* Book card: the whole cover is visible (contain) on a clean panel. */
.shelf-grid { row-gap: 1.5rem; }
.book { display: block; position: relative; }
.book-cover {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem;
  background: rgb(var(--c-card));
  border: 1px solid rgb(var(--c-line));
  border-radius: .75rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.book:hover .book-cover { box-shadow: 0 8px 22px rgba(0, 0, 0, .14); border-color: rgb(var(--c-accent)); }
.book-cover img, .book-cover .book-blank {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
.book-blank {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f766e, #0b3d38); color: #f3d98a; font-size: 3rem; font-weight: 700;
}
.book-info { padding: .7rem .15rem 0; }
.book-title { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-author { margin-top: .15rem; font-size: .85rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-scroll { padding-bottom: .5rem; }

/* List view */
.book-row { display: flex; gap: 1rem; align-items: center; }
.book-row .book-cover { width: 7rem; flex: none; }

/* Footer */
.lib-footer { background: #0b3d38; color: #e8dfc4; border-top: 3px solid var(--brass); }
.lib-footer a:hover { text-decoration: underline; }
.lib-footer .text-muted, .lib-footer .text-brand { color: #cdbf93; }