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