:root{
  --unej-gold: #caa04a;
  --unej-navy: #0e2d4f;
  --unej-ink: #0b1726;
  --muted:#eef2f6;
  --card:#ffffff;
  --accent:#ff783c;
}
html,body{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: linear-gradient(180deg,#f8fafc 0%, #eef2f6 100%);
  color: var(--unej-ink);
}
.brandbar{background:#fff; border-bottom:1px solid rgba(0,0,0,.06)}
.brandbar .navbar-brand img{height:64px}
.brandbar .title{font-weight:700; letter-spacing:.3px; color:var(--unej-navy)}
.hero{position:relative; overflow:hidden; background: radial-gradient(1200px 600px at 10% -10%, rgba(202,160,74,.18), transparent 50%),
                       radial-gradient(900px 500px at 110% 10%, rgba(14,45,79,.12), transparent 50%)}
.hero-card{background:var(--card); border:1px solid rgba(14,45,79,.06)}
.hero h1{font-weight:800; color:var(--unej-navy)}
.stat-pill{display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid rgba(0,0,0,.06); padding:.5rem .75rem; border-radius:999px}
.shelf{position:relative}
.book-grid{display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:1rem}
.book-card{position:relative; border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(14,45,79,.08); box-shadow:0 6px 18px rgba(14,45,79,.06); transition:transform .2s ease, box-shadow .2s ease}
.book-card:hover{transform: translateY(-2px); box-shadow:0 10px 24px rgba(14,45,79,.12)}
.book-thumb{display:block; aspect-ratio:3/4; width:100%; object-fit:cover}
.book-meta{position:absolute; inset:auto 8px 8px 8px; background:rgba(14,45,79,.78); color:#fff; padding:.35rem .5rem; border-radius:10px; font-size:.8rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem}
.book-badge{background:var(--unej-gold); color:#1a1a1a; font-weight:700; padding:.2rem .5rem; border-radius:8px}
.divider{height:14px; background:linear-gradient(to bottom, #a87436, #8c5a23); border-radius:999px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); opacity:.85}
.footer-modern{background:#0e2438; color:#c8d2df}
.footer-modern a{color:#e6edf5; text-decoration:none}
.footer-modern a:hover{color:#fff; text-decoration:underline}
.btn-unej{--bs-btn-color:#fff; --bs-btn-bg:var(--unej-navy); --bs-btn-border-color:var(--unej-navy); --bs-btn-hover-bg:#10365f; --bs-btn-hover-border-color:#10365f}
.btn-accent{--bs-btn-color:#1a1a1a; --bs-btn-bg:var(--unej-gold); --bs-btn-border-color:var(--unej-gold); --bs-btn-hover-bg:#d7ae59; --bs-btn-hover-border-color:#d7ae59}
.shadow-soft{box-shadow:0 10px 24px rgba(14,45,79,.08)}
.blur-hero{backdrop-filter: blur(6px)}
@media (max-width: 575.98px){ .brandbar .navbar-brand img{height:48px} }
/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{ --card:#0f1826; --muted:#0b1421 }
  html,body{ background: linear-gradient(180deg,#0c1726 0%, #0b1421 100%); color:#e6edf5 }
  .brandbar{ background:#0f1826; border-color: rgba(255,255,255,.08) }
  .hero-card{ background:#0f1826; border-color: rgba(255,255,255,.08) }
  .book-card{ background:#0f1826; border-color: rgba(255,255,255,.08) }
  .book-meta{ background: rgba(10,20,35,.82) }
  .divider{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) }
  .footer-modern{ background:#08111c }
  .stat-pill{ background:#0f1826; border-color: rgba(255,255,255,.08) }
}
/* Manual dark class toggle */
.dark html, .dark body{ background: linear-gradient(180deg,#0c1726 0%, #0b1421 100%); color:#e6edf5 }
.dark .brandbar{ background:#0f1826; border-color: rgba(255,255,255,.08) }
.dark .hero-card{ background:#0f1826; border-color: rgba(255,255,255,.08) }
.dark .book-card{ background:#0f1826; border-color: rgba(255,255,255,.08) }
.dark .book-meta{ background: rgba(10,20,35,.82) }
.dark .footer-modern{ background:#08111c }
.dark .stat-pill{ background:#0f1826; border-color: rgba(255,255,255,.08) }