.bookshelf{position:relative;max-width:1400px;margin:0 auto;padding:40px 30px 20px;background:linear-gradient(180deg,#f1eae4 0,#e8dfd9);border-radius:12px;box-shadow:inset 0 2px 10px rgba(0,0,0,.1),0 4px 20px rgba(0,0,0,.08)}.bookshelf:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent,transparent 50px,rgba(139,90,43,.03) 0,rgba(139,90,43,.03) 51px),repeating-linear-gradient(0deg,transparent,rgba(139,90,43,.02) 2px,transparent 4px);border-radius:12px;pointer-events:none}.bookshelf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:40px 30px;padding:20px 0 30px;position:relative;z-index:2}.book-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;animation:fadeInUp .6s ease forwards;animation-delay:calc(var(--book-index, 0) * .08s);opacity:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.book-cover{position:relative;width:180px;height:260px;cursor:pointer;border-radius:4px 16px 16px 4px;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 15px 35px rgba(0,0,0,.2),0 5px 15px rgba(0,0,0,.1),inset 0 0 0 1px hsla(0,0%,100%,.1);transition:all .4s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;transform:perspective(1000px) rotateY(-5deg);overflow:hidden}.book-item:hover .book-cover{transform:perspective(1000px) rotateY(-15deg) translateY(-10px);box-shadow:0 30px 60px rgba(0,0,0,.25),0 15px 30px rgba(0,0,0,.2),20px 20px 40px rgba(0,0,0,.15)}.book-image{-o-object-fit:cover;object-fit:cover;border-radius:4px 16px 16px 4px;transition:transform .4s ease}.book-item:hover .book-image{transform:scale(1.02)}.book-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,hsl(var(--primary)) 0,hsl(var(--primary)/.7) 50%,hsl(var(--primary)/.5) 100%);border-radius:4px 16px 16px 4px;color:#fff}.book-spine{position:absolute;left:0;top:0;width:16px;height:100%;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.2) 20%,hsla(0,0%,100%,.1) 40%,rgba(0,0,0,.15) 60%,transparent);border-radius:4px 0 0 4px;z-index:2}.book-cover:after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:4px;background:repeating-linear-gradient(180deg,#f5f5f5 0,#e8e8e8 1px,#f5f5f5 2px);border-radius:0 2px 2px 0;opacity:.8}.book-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.3) 40%,transparent 70%);opacity:0;transition:opacity .3s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:25px;border-radius:4px 16px 16px 4px;z-index:3}.book-item:hover .book-overlay{opacity:1}.book-read-text{color:#fff;font-weight:600;font-size:13px;letter-spacing:.5px;padding:10px 28px;background:linear-gradient(135deg,hsl(var(--primary)) 0,hsl(var(--primary)/.8) 100%);border-radius:25px;transform:translateY(15px);transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px hsl(var(--primary)/.4)}.book-item:hover .book-read-text{transform:translateY(0)}.book-info{text-align:center;margin-top:20px;max-width:180px;padding:0 5px}.book-title{font-size:15px;font-weight:600;color:#4d4033;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s ease}.book-item:hover .book-title{color:hsl(var(--primary))}.book-author{font-size:13px;color:#847362;margin-top:6px;font-weight:400}.shelf{position:relative;height:24px;background:linear-gradient(180deg,#a16b45 0,#815331 40%,#6b4124);border-radius:0 0 6px 6px;margin-top:0;z-index:1;box-shadow:0 4px 8px rgba(0,0,0,.2),inset 0 2px 4px hsla(0,0%,100%,.1)}.shelf:before{top:-10px;left:0;right:0;height:10px;background:linear-gradient(180deg,#b48664 0,#ab7249);border-radius:4px 4px 0 0;box-shadow:inset 0 2px 4px hsla(0,0%,100%,.15)}.shelf:after,.shelf:before{content:"";position:absolute}.shelf:after{inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 82px);border-radius:0 0 6px 6px;pointer-events:none}.shelf-shadow{height:30px;background:linear-gradient(180deg,rgba(0,0,0,.15) 0,transparent);margin-top:0}.dark .bookshelf{background:linear-gradient(180deg,#372c25 0,#2d221b);box-shadow:inset 0 2px 10px rgba(0,0,0,.3),0 4px 20px rgba(0,0,0,.3)}.dark .bookshelf:before{background-image:repeating-linear-gradient(90deg,transparent,transparent 50px,rgba(139,90,43,.08) 0,rgba(139,90,43,.08) 51px),repeating-linear-gradient(0deg,transparent,rgba(139,90,43,.05) 2px,transparent 4px)}.dark .book-cover{box-shadow:0 15px 35px rgba(0,0,0,.4),0 5px 15px rgba(0,0,0,.3),inset 0 0 0 1px hsla(0,0%,100%,.05)}.dark .book-item:hover .book-cover{box-shadow:0 30px 60px rgba(0,0,0,.5),0 15px 30px rgba(0,0,0,.4),20px 20px 40px rgba(0,0,0,.3)}.dark .book-cover:after{background:repeating-linear-gradient(180deg,#3a3a3a 0,#2a2a2a 1px,#3a3a3a 2px);opacity:.6}.dark .book-title{color:#ded9d3}.dark .book-author{color:#a3998f}.dark .shelf{background:linear-gradient(180deg,#5d4432 0,#4c3524 40%,#392618)}.dark .shelf:before{background:linear-gradient(180deg,#705643 0,#634936)}@media (max-width:1024px){.bookshelf{padding:30px 20px 15px;margin:0 10px}.bookshelf-row{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:35px 25px}.book-cover{width:160px;height:230px}.book-info{max-width:160px}}@media (max-width:768px){.bookshelf{padding:25px 15px 10px;border-radius:8px}.bookshelf-row{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:30px 20px}.book-cover{width:140px;height:200px;transform:perspective(1000px) rotateY(0deg)}.book-item:hover .book-cover{transform:perspective(1000px) rotateY(0deg) translateY(-8px)}.book-info{max-width:140px;margin-top:16px}.book-title{font-size:14px}.book-author{font-size:12px}.book-spine{width:12px}.shelf{height:20px}.shelf:before{height:8px;top:-8px}}@media (max-width:480px){.bookshelf{padding:20px 12px 8px;margin:0 5px}.bookshelf-row{grid-template-columns:repeat(2,1fr);gap:25px 15px}.book-cover{width:100%;max-width:140px;height:190px}.book-info{max-width:100%}.book-title{font-size:13px}.book-read-text{font-size:12px;padding:8px 20px}.shelf{height:16px}.shelf:before{height:6px;top:-6px}}