.bk-list{list-style:none;position:relative;padding-top:25px;display:flex;flex-wrap:wrap;gap:60px;justify-content:center}.bk-list li{position:relative;width:260px;height:398px;z-index:1;perspective:1800px}.bk-list li .bk-book{position:absolute;width:100%;height:398px;transform-style:preserve-3d;transition:transform .5s;cursor:pointer}.bk-list li .bk-book.bk-bookdefault:hover{transform:rotateY(35deg)}.bk-list li .bk-book>div,.bk-list li .bk-front>div{display:block;position:absolute}.bk-list li .bk-front{transform-style:preserve-3d;transform-origin:0 50%;transition:transform .5s;transform:translateZ(20px);z-index:10}.bk-list li .bk-front>div{backface-visibility:hidden;transform-style:preserve-3d}.bk-list li .bk-back,.bk-list li .bk-front,.bk-list li .bk-front>div{width:260px;height:398px}.bk-list li .bk-left,.bk-list li .bk-right{width:40px;left:-20px}.bk-list li .bk-back{transform:rotateY(-180deg) translateZ(20px);box-shadow:10px 10px 30px rgba(0,0,0,.3);border-radius:3px 0 0 3px}.bk-list li .bk-cover-back{background-color:#1e293b;transform:rotateY(-180deg)}.bk-list li .bk-right{height:398px;top:5px;transform:rotateY(90deg) translateZ(295px);backface-visibility:hidden}.bk-list li .bk-left{height:398px;transform:rotateY(-90deg)}.bk-list li .bk-right{background-color:#fff}.bk-list li .bk-front>div{border-radius:0 3px 3px 0;box-shadow:inset 4px 0 10px rgba(0,0,0,.1)}.bk-list li .bk-front:after{content:"";position:absolute;top:1px;bottom:1px;left:-1px;width:1px}.bk-list li .bk-back:after,.bk-list li .bk-cover:after{content:"";position:absolute;top:0;left:10px;bottom:0;width:3px;background:rgba(0,0,0,.06);box-shadow:1px 0 3px rgba(255,255,255,.1)}.bk-list li .bk-back:after{left:auto;right:10px}.bk-left h2{width:398px;height:40px;transform-origin:0 0;transform:rotate(90deg) translateY(-40px);display:flex;align-items:center;justify-content:flex-end;padding-right:10px}.book-emerald .bk-back,.book-emerald .bk-front:after,.book-emerald .bk-front>div,.book-emerald .bk-left{background:linear-gradient(135deg,#10b981,#14b8a6)}.book-purple .bk-back,.book-purple .bk-front:after,.book-purple .bk-front>div,.book-purple .bk-left{background:linear-gradient(135deg,#a855f7,#ec4899)}.book-orange .bk-back,.book-orange .bk-front:after,.book-orange .bk-front>div,.book-orange .bk-left{background:linear-gradient(135deg,#f97316,#ef4444)}.book-blue .bk-back,.book-blue .bk-front:after,.book-blue .bk-front>div,.book-blue .bk-left{background:linear-gradient(135deg,#3b82f6,#8b5cf6)}.bk-cover{width:100%;height:100%;overflow:hidden;position:relative;border-radius:0 3px 3px 0}.bk-cover img{width:100%;height:100%;object-fit:cover}.bk-cover-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.4) 50%,transparent);padding:20px;color:white}.bk-cover-overlay h2{font-size:16px;font-weight:700;margin-bottom:5px;line-height:1.3}.bk-cover-overlay p{font-size:12px;opacity:.9}.bk-left h2{color:#fff;font-size:14px;font-weight:600;text-align:right;line-height:1.2}.bk-left h2 span{display:inline-block;max-width:350px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-back{display:flex;align-items:center;justify-content:center;padding:30px}.bk-back-content{text-align:center;color:white}.bk-back-content h3{font-size:18px;font-weight:700;margin-bottom:15px}.bk-back-content p{font-size:13px;line-height:1.5;margin-bottom:20px}.bk-back-content button{background:white;color:#1e293b;padding:10px 20px;border-radius:5px;font-weight:600;border:none;cursor:pointer;transition:transform .2s}.bk-back-content button:hover{transform:scale(1.05)}.view-mode-list .bk-list{flex-direction:column;align-items:center;gap:30px}.view-mode-list .bk-list li{width:100%;max-width:800px;height:300px}.view-mode-list .bk-list li .bk-back,.view-mode-list .bk-list li .bk-book,.view-mode-list .bk-list li .bk-front,.view-mode-list .bk-list li .bk-front>div{width:100%;height:300px}.view-mode-list .bk-list li .bk-left{height:300px}.view-mode-list .bk-left h2{width:300px}