.book-grid{display:grid;grid-template-columns:repeat(5,1fr);justify-items:center;gap:clamp(36px,4vw,50px) clamp(20px,3vw,30px);padding:40px 0 100px}@media (max-width:1400px){.book-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:1100px){.book-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px;padding:26px 0 120px}}@media (max-width:480px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}}.book-card{display:flex;flex-direction:column;align-items:center;cursor:pointer;perspective:1200px;position:relative;z-index:1;overflow:visible}.book-card:hover{z-index:20}.book-3d-container{width:210px;aspect-ratio:2/3;height:auto;position:relative;transform-style:preserve-3d;transform:rotateY(-20deg) rotateX(2deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}@media (max-width:768px){.book-3d-container{width:min(38vw,172px);min-width:132px}.book-card .meta-title{font-size:11px}.book-card .book-meta{padding:28px 8px 8px}}@media (max-width:340px){.book-3d-container{min-width:120px}}.book-card:hover .book-3d-container{transform:rotateY(calc(-20deg + var(--rot-y, 0deg))) rotateX(calc(5deg + var(--rot-x, 0deg))) translateZ(20px) scale(1.1)}.book-face{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}.book-front{background-size:cover;background-position:50%;transform:translateZ(17.5px);z-index:2;border-radius:3px 4px 4px 3px;box-shadow:inset 4px 0 6px -2px rgba(255,255,255,.3),inset -14px 0 20px -5px rgba(0,0,0,.5),inset -2px 0 4px rgba(0,0,0,.4),inset 0 1px 3px rgba(255,255,255,.2);position:relative;overflow:hidden}.book-front:after{content:"";position:absolute;inset:0;background:radial-gradient(circle 150px at var(--mouse-x,50%) var(--mouse-y,50%),var(--primary-glow) 0,transparent 70%);opacity:0;transition:opacity .6s cubic-bezier(.34,1.56,.64,1);pointer-events:none;mix-blend-mode:screen;border-radius:2px}.book-card:hover .book-front:after{opacity:1}.book-back{display:none;transform:translateZ(-17.5px) rotateY(180deg);background-color:var(--background-card);border-radius:4px 3px 3px 4px;box-shadow:inset -4px 0 10px rgba(0,0,0,.5)}.book-left{width:35px;transform-origin:left;transform:rotateY(-90deg) translateX(-17.5px);background:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.02) 15%,rgba(0,0,0,.02) 85%,rgba(0,0,0,.3)),repeating-linear-gradient(90deg,#f8f8f4 0,#f8f8f4 2px,#dfdfd8 0,#dfdfd8 3px);box-shadow:inset 2px 0 4px rgba(0,0,0,.35),inset -2px 0 4px rgba(0,0,0,.35)}.book-right{width:35px;right:0;left:auto;transform-origin:right;transform:rotateY(90deg) translateX(17.5px);background:linear-gradient(270deg,rgba(0,0,0,.25) 0,rgba(0,0,0,.02) 15%,rgba(0,0,0,.02) 85%,rgba(0,0,0,.2)),repeating-linear-gradient(90deg,#f8f8f4 0,#f8f8f4 2px,#dfdfd8 0,#dfdfd8 3px);box-shadow:inset 2px 0 4px rgba(0,0,0,.3),inset -2px 0 4px rgba(0,0,0,.3)}.book-top{height:35px;transform-origin:top;transform:rotateX(90deg) translateY(-17.5px);background:linear-gradient(180deg,rgba(0,0,0,.25) 0,rgba(0,0,0,.02) 15%,rgba(0,0,0,.02) 85%,rgba(0,0,0,.25)),repeating-linear-gradient(180deg,#f8f8f4 0,#f8f8f4 2px,#dfdfd8 0,#dfdfd8 3px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),inset 0 -2px 4px rgba(0,0,0,.35)}.book-bottom{top:auto;bottom:0;height:35px;transform-origin:bottom;transform:rotateX(-90deg) translateY(17.5px);background:linear-gradient(0deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.15) 20%,rgba(0,0,0,.15) 80%,rgba(0,0,0,.4)),repeating-linear-gradient(0deg,#f8f8f4 0,#f8f8f4 2px,#dfdfd8 0,#dfdfd8 3px);box-shadow:inset 0 2px 5px rgba(0,0,0,.45),inset 0 -2px 5px rgba(0,0,0,.45)}.book-badge{position:absolute;top:10px;right:-8px;color:#FFF;font-size:10px;font-weight:700;padding:4px 10px;border-radius:10px;transform:translateZ(10px);box-shadow:0 4px 12px rgba(0,0,0,.4);letter-spacing:.5px;z-index:5}.book-badge.teal{background:var(--primary)}.book-badge.red{background:var(--accent);color:#121216}.book-meta{position:absolute;bottom:0;left:0;width:100%;padding:35px 10px 10px;background:linear-gradient(0deg,rgba(12,12,15,.95) 0,rgba(12,12,15,.6) 55%,transparent);color:var(--foreground);text-align:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;transition:padding .3s ease-out;transform:translateZ(1px)}.meta-title{font-weight:700;font-size:13px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0;text-shadow:1px 1px 3px rgba(0,0,0,.8)}.meta-details{font-size:10px;color:var(--foreground-muted);display:flex;justify-content:center;gap:8px;font-weight:600;letter-spacing:.5px;max-height:0;opacity:0;transform:translateY(8px);overflow:hidden;transition:all .35s cubic-bezier(.34,1.56,.64,1)}.book-card:hover .meta-details{max-height:20px;opacity:1;transform:translateY(0);margin-top:4px}.book-card:hover .book-meta{padding-top:50px}.meta-genre{color:var(--primary-light)}.book-modal-container{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex;justify-content:center;align-items:center}.book-modal-container.active{pointer-events:auto}.book-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(12px);opacity:0;transition:opacity .5s ease}.book-modal-container.active .book-modal-backdrop{opacity:1}.book-modal-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.flying-clone{position:absolute;perspective:2000px;z-index:2;pointer-events:none}.flying-clone .clone-front{position:absolute;inset:0;background-size:cover;background-position:50%;transform-origin:left center;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.32,.72,0,1);border-radius:2px 4px 4px 2px;box-shadow:inset 4px 0 6px -2px rgba(255,255,255,.3),inset -14px 0 20px -5px rgba(0,0,0,.5);z-index:2}.flying-clone.open .clone-front{transform:rotateY(-180deg);box-shadow:inset 4px 0 6px -2px rgba(255,255,255,.3),inset -4px 0 10px -5px rgba(0,0,0,.3)}.flying-clone .clone-front:after{content:"";transform:translateZ(-1px) rotateY(180deg);border-radius:4px 2px 2px 4px;box-shadow:inset 12px 0 20px -5px rgba(0,0,0,.2);backface-visibility:hidden}.flying-clone .clone-front:after,.flying-clone .clone-page{position:absolute;inset:0;background:var(--background-card)}.flying-clone .clone-page{border-radius:1px 3px 3px 1px;box-shadow:inset 8px 0 15px rgba(0,0,0,.15);z-index:1}.open-book-2d{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:75vw;max-width:900px;height:65vh;min-height:500px;max-height:700px;background:transparent;border-radius:20px;display:flex;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 60px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s ease,background .2s ease;z-index:3;color:var(--foreground)}.open-book-2d.visible{opacity:1;background:var(--background-card);pointer-events:auto}.ob-page{flex:1;position:relative;padding:48px;display:flex;flex-direction:column}.ob-left{background:linear-gradient(to right,var(--background-card) 0,var(--background-card) 85%,rgba(255,255,255,.02) 100%);border-radius:20px 0 0 20px}.ob-right{background:linear-gradient(to right,rgba(0,0,0,.15) 0,var(--background-card) 15%,var(--background-card) 100%);border-radius:0 20px 20px 0;overflow-y:auto}.ob-right::-webkit-scrollbar{width:4px}.ob-right::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}.ob-spine{position:absolute;top:0;bottom:0;left:50%;width:40px;transform:translateX(-50%);background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.02) 30%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.02) 70%,transparent);z-index:10;pointer-events:none}.ob-cover-thumb{width:130px;aspect-ratio:2/3;border-radius:8px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.5);margin:0 auto 24px;display:block}.ob-title{font-size:28px;font-weight:700;margin:0 0 8px;color:var(--foreground);text-align:center;line-height:1.2}.ob-author{font-size:15px;color:var(--foreground-muted);text-align:center;margin:0 0 4px}.ob-year{font-size:13px;color:var(--foreground-subtle);text-align:center;margin:0 0 20px;font-variant-numeric:tabular-nums}.ob-genre{align-self:center;background:rgba(0,126,115,.1);border:1px solid rgba(0,126,115,.2);padding:6px 14px;border-radius:14px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--primary-light)}.ob-synopsis-wrapper{max-height:120px;overflow-y:auto;margin-bottom:24px;padding-right:12px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.ob-synopsis-wrapper::-webkit-scrollbar{width:4px}.ob-synopsis-wrapper::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}.ob-synopsis{font-size:14px;line-height:1.7;color:var(--foreground-muted)}.ob-tracking-board{flex-grow:1;display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.ob-track-row{display:flex;align-items:center;justify-content:space-between}.ob-label{font-weight:600}.ob-label,.ob-status-select{font-size:14px;color:var(--foreground)}.ob-status-select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:8px 28px 8px 12px;border-radius:10px;cursor:pointer;outline:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a847a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;transition:all .2s ease}.ob-status-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(0,126,115,.2)}.ob-status-select option{background:var(--background-card);color:var(--foreground)}.ob-progress-container{margin-top:-4px}.ob-progress-bar{height:6px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}.ob-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1)}.ob-progress-controls{display:flex;align-items:center;gap:12px}.ob-progress-val{font-variant-numeric:tabular-nums;font-size:14px;font-weight:500;color:var(--foreground);min-width:80px;text-align:center}.ob-circle-btn{width:28px;height:28px;border-radius:50%;border:none;background:var(--background-subtle);color:var(--foreground-muted);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.ob-circle-btn:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}.ob-interactive-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end}.ob-interactive-rating input{display:none}.ob-interactive-rating label{font-size:22px;color:var(--background-subtle);cursor:pointer;transition:color .2s ease;padding:0 2px}.ob-interactive-rating input:checked~label,.ob-interactive-rating label:hover,.ob-interactive-rating label:hover~label{color:var(--primary)}.ob-notes-section{display:flex;flex-direction:column;gap:8px;margin-top:8px}.ob-notes-input{width:100%;height:72px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;resize:none;outline:none;font-size:13px;line-height:1.6;color:var(--foreground);padding:12px 14px;transition:border-color .2s ease}.ob-notes-input::placeholder{color:var(--foreground-subtle)}.ob-notes-input:focus{border-color:var(--primary)}.ob-start-btn{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:#fff;border:none;padding:14px;font-size:15px;font-weight:600;letter-spacing:.5px;border-radius:14px;cursor:pointer;width:100%;margin-top:auto;transition:all .2s ease;box-shadow:0 4px 15px rgba(0,126,115,.3)}.ob-start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,126,115,.4)}.ob-close{position:absolute;top:16px;right:20px;background:rgba(255,255,255,.05);border:none;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--foreground-muted);cursor:pointer;transition:all .2s;z-index:20}.ob-close:hover{background:rgba(255,255,255,.1);color:var(--foreground)}@media (max-width:768px){.open-book-2d{width:min(92vw,440px);height:min(84dvh,720px);max-height:calc(100dvh - 32px);min-height:0;flex-direction:column;border-radius:18px;overflow:hidden}.ob-left,.ob-right{padding:20px;min-height:0}.ob-left{flex:0 0 auto;border-radius:18px 18px 0 0;border-bottom:1px solid rgba(255,255,255,.06);background:var(--background-card);padding-bottom:16px}.ob-right{flex:1 1 auto;border-radius:0 0 18px 18px;padding-top:18px;overflow-y:auto}.ob-spine{display:none}.ob-cover-thumb{width:82px;margin-bottom:12px}.ob-title{font-size:22px}.ob-author{font-size:14px}.ob-page{flex:none;height:auto}.ob-start-btn{margin-top:18px}}@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.book-card{perspective:none}.book-3d-container,.book-card:hover .book-3d-container{transform:none;transition:none}.book-front{transform:none}.book-back,.book-bottom,.book-front:after,.book-left,.book-right,.book-top{display:none}}