body { font-family: 'Be Vietnam Pro', sans-serif; }
.font-serif-display { font-family: 'Playfair Display', serif; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Sidebar nav item shared states */
.nav-item { color: #cbd5e1; transition: background .15s, color .15s; }
.nav-item:hover {
  background: rgba(45,212,191,.10);
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(45,212,191,.25);
}
.nav-item.is-active {
  background: rgba(20,80,90,.55);
  color: #fff !important; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(45,212,191,.45);
}
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Advanced Filter Modal tag chip styles */
.tag-chip {
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.tag-chip.active {
  background-color: #f0fdfa !important;
  color: #0d9488 !important;
  border-color: #99f6e4 !important;
  box-shadow: 0 1px 3px 0 rgba(13, 148, 136, 0.1);
}
.tag-chip:not(.active):hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

/* 3D Book & Animations */
.book-container {
  perspective: 1000px;
}
.book-3d {
  transform: rotateY(-20deg) rotateX(15deg) rotateZ(-5deg);
  transform-style: preserve-3d;
  box-shadow: 
    -6px 6px 18px rgba(0, 0, 0, 0.32),
    0 0 25px rgba(99, 102, 241, 0.25);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.group:hover .book-3d {
  transform: rotateY(-10deg) rotateX(12deg) rotateZ(-3deg) scale(1.05);
  box-shadow: 
    -10px 10px 25px rgba(0, 0, 0, 0.38),
    0 0 35px rgba(99, 102, 241, 0.45);
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotateY(-5deg) rotateZ(-1deg); }
  50% { transform: translateY(-8px) rotateY(5deg) rotateZ(1deg); }
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  20%, 60% { transform: rotate(-10deg); }
  40%, 80% { transform: rotate(14deg); }
}

.nav-icon {
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: inline-block;
  flex-shrink: 0;
}