.book-grid{grid-template-columns:repeat(5,1fr);justify-items:center;gap:clamp(36px,4vw,50px) clamp(20px,3vw,30px);padding:40px 0 100px;display:grid}@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{cursor:pointer;perspective:1200px;z-index:1;flex-direction:column;align-items:center;display:flex;position:relative;overflow:visible}.book-card:hover{z-index:20}.book-3d-container{aspect-ratio:2/3;width:210px;height:auto;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.34,1.56,.64,1);position:relative;transform:rotateY(-20deg)rotateX(2deg)}@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{backface-visibility:hidden;width:100%;height:100%;position:absolute;top:0;left:0}.book-front{z-index:2;background-position:50%;background-size:cover;border-radius:3px 4px 4px 3px;position:relative;overflow:hidden;transform:translateZ(17.5px);box-shadow:inset 4px 0 6px -2px #ffffff4d,inset -14px 0 20px -5px #00000080,inset -2px 0 4px #0006,inset 0 1px 3px #fff3}.book-front:after{content:"";background:radial-gradient(circle 150px at var(--mouse-x,50%) var(--mouse-y,50%), var(--primary-glow) 0%, transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen;border-radius:2px;transition:opacity .6s cubic-bezier(.34,1.56,.64,1);position:absolute;inset:0}.book-card:hover .book-front:after{opacity:1}.book-back{background-color:var(--background-card);border-radius:4px 3px 3px 4px;display:none;transform:translateZ(-17.5px)rotateY(180deg);box-shadow:inset -4px 0 10px #00000080}.book-left{transform-origin:0;background:linear-gradient(90deg,#0000004d 0%,#00000005 15% 85%,#0000004d 100%),repeating-linear-gradient(90deg,#f8f8f4 0 2px,#dfdfd8 2px 3px);width:35px;transform:rotateY(-90deg)translate(-17.5px);box-shadow:inset 2px 0 4px #00000059,inset -2px 0 4px #00000059}.book-right{transform-origin:100%;background:linear-gradient(270deg,#00000040 0%,#00000005 15% 85%,#0003 100%),repeating-linear-gradient(90deg,#f8f8f4 0 2px,#dfdfd8 2px 3px);width:35px;left:auto;right:0;transform:rotateY(90deg)translate(17.5px);box-shadow:inset 2px 0 4px #0000004d,inset -2px 0 4px #0000004d}.book-top{transform-origin:top;background:linear-gradient(#00000040 0%,#00000005 15% 85%,#00000040 100%),repeating-linear-gradient(#f8f8f4 0 2px,#dfdfd8 2px 3px);height:35px;transform:rotateX(90deg)translateY(-17.5px);box-shadow:inset 0 2px 4px #00000059,inset 0 -2px 4px #00000059}.book-bottom{transform-origin:bottom;background:linear-gradient(#0006 0%,#00000026 20% 80%,#00000080 100%),repeating-linear-gradient(0deg,#f8f8f4 0 2px,#dfdfd8 2px 3px);height:35px;top:auto;bottom:0;transform:rotateX(-90deg)translateY(17.5px);box-shadow:inset 0 2px 5px #00000073,inset 0 -2px 5px #00000073}.book-badge{color:#fff;letter-spacing:.5px;z-index:5;border-radius:10px;padding:4px 10px;font-size:10px;font-weight:700;position:absolute;top:10px;right:-8px;transform:translateZ(10px);box-shadow:0 4px 12px #0006}.book-badge.teal{background:var(--primary)}.book-badge.red{background:var(--accent);color:#121216}.book-meta{width:100%;color:var(--foreground);text-align:center;box-sizing:border-box;background:linear-gradient(#0000 0%,#0c0c0f99 45%,#0c0c0ff2 100%);flex-direction:column;justify-content:flex-end;padding:35px 10px 10px;transition:padding .3s ease-out;display:flex;position:absolute;bottom:0;left:0;transform:translateZ(1px)}.meta-title{text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;text-shadow:1px 1px 3px #000c;margin-bottom:0;font-size:13px;font-weight:700;overflow:hidden}.meta-details{color:var(--foreground-muted);letter-spacing:.5px;opacity:0;justify-content:center;gap:8px;max-height:0;font-size:10px;font-weight:600;transition:all .35s cubic-bezier(.34,1.56,.64,1);display:flex;overflow:hidden;transform:translateY(8px)}.book-card:hover .meta-details{opacity:1;max-height:20px;margin-top:4px;transform:translateY(0)}.book-card:hover .book-meta{padding-top:50px}.meta-genre{color:var(--primary-light)}.book-modal-container{z-index:9999;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.book-modal-container.active{pointer-events:auto}.book-modal-backdrop{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;background:#000000bf;transition:opacity .5s;position:absolute;inset:0}.book-modal-container.active .book-modal-backdrop{opacity:1}.book-modal-wrapper{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.flying-clone{perspective:2000px;z-index:2;pointer-events:none;position:absolute}.flying-clone .clone-front{transform-origin:0;transform-style:preserve-3d;z-index:2;background-position:50%;background-size:cover;border-radius:2px 4px 4px 2px;transition:transform .6s cubic-bezier(.32,.72,0,1);position:absolute;inset:0;box-shadow:inset 4px 0 6px -2px #ffffff4d,inset -14px 0 20px -5px #00000080}.flying-clone.open .clone-front{transform:rotateY(-180deg);box-shadow:inset 4px 0 6px -2px #ffffff4d,inset -4px 0 10px -5px #0000004d}.flying-clone .clone-front:after{content:"";background:var(--background-card);backface-visibility:hidden;border-radius:4px 2px 2px 4px;position:absolute;inset:0;transform:translateZ(-1px)rotateY(180deg);box-shadow:inset 12px 0 20px -5px #0003}.flying-clone .clone-page{background:var(--background-card);z-index:1;border-radius:1px 3px 3px 1px;position:absolute;inset:0;box-shadow:inset 8px 0 15px #00000026}.open-book-2d{opacity:0;pointer-events:none;z-index:3;width:75vw;max-width:900px;height:65vh;min-height:500px;max-height:700px;color:var(--foreground);background:0 0;border-radius:20px;transition:opacity .2s,background .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #ffffff0d,0 30px 60px #0009}.open-book-2d.visible{opacity:1;background:var(--background-card);pointer-events:auto}.ob-page{flex-direction:column;flex:1;padding:48px;display:flex;position:relative}.ob-left{background:linear-gradient(to right, var(--background-card) 0%, var(--background-card) 85%, #ffffff05 100%);border-radius:20px 0 0 20px}.ob-right{background:linear-gradient(to right, #00000026 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:#ffffff1a;border-radius:2px}.ob-spine{z-index:10;pointer-events:none;background:linear-gradient(90deg,#0000 0%,#ffffff05 30%,#ffffff0a 50%,#ffffff05 70%,#0000 100%);width:40px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.ob-cover-thumb{aspect-ratio:2/3;object-fit:cover;border-radius:8px;width:130px;margin:0 auto 24px;display:block;box-shadow:0 10px 30px #00000080}.ob-title{color:var(--foreground);text-align:center;margin:0 0 8px;font-size:28px;font-weight:700;line-height:1.2}.ob-author{color:var(--foreground-muted);text-align:center;margin:0 0 4px;font-size:15px}.ob-year{color:var(--foreground-subtle);text-align:center;font-variant-numeric:tabular-nums;margin:0 0 20px;font-size:13px}.ob-genre{text-transform:uppercase;letter-spacing:1px;color:var(--primary-light);background:#007e731a;border:1px solid #007e7333;border-radius:14px;align-self:center;padding:6px 14px;font-size:12px}.ob-synopsis-wrapper{scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;border-bottom:1px solid #ffffff0f;max-height:120px;margin-bottom:24px;padding-bottom:12px;padding-right:12px;overflow-y:auto}.ob-synopsis-wrapper::-webkit-scrollbar{width:4px}.ob-synopsis-wrapper::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}.ob-synopsis{color:var(--foreground-muted);font-size:14px;line-height:1.7}.ob-tracking-board{flex-direction:column;flex-grow:1;gap:16px;margin-bottom:24px;display:flex}.ob-track-row{justify-content:space-between;align-items:center;display:flex}.ob-label{color:var(--foreground);font-size:14px;font-weight:600}.ob-status-select{appearance:none;color:var(--foreground);cursor:pointer;background:#ffffff0d 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") right 8px center/14px no-repeat;border:1px solid #ffffff1a;border-radius:10px;outline:none;padding:8px 28px 8px 12px;font-size:14px;transition:all .2s}.ob-status-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px #007e7333}.ob-status-select option{background:var(--background-card);color:var(--foreground)}.ob-progress-container{margin-top:-4px}.ob-progress-bar{background:#ffffff0d;border-radius:3px;height:6px;overflow:hidden}.ob-progress-fill{background:linear-gradient(90deg, var(--primary), var(--primary-light));border-radius:3px;height:100%;transition:width .6s cubic-bezier(.4,0,.2,1)}.ob-progress-controls{align-items:center;gap:12px;display:flex}.ob-progress-val{font-variant-numeric:tabular-nums;color:var(--foreground);text-align:center;min-width:80px;font-size:14px;font-weight:500}.ob-circle-btn{background:var(--background-subtle);width:28px;height:28px;color:var(--foreground-muted);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;line-height:1;transition:all .2s;display:flex}.ob-circle-btn:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}.ob-interactive-rating{flex-direction:row-reverse;justify-content:flex-end;display:flex}.ob-interactive-rating input{display:none}.ob-interactive-rating label{color:var(--background-subtle);cursor:pointer;padding:0 2px;font-size:22px;transition:color .2s}.ob-interactive-rating label:hover,.ob-interactive-rating label:hover~label,.ob-interactive-rating input:checked~label{color:var(--primary)}.ob-notes-section{flex-direction:column;gap:8px;margin-top:8px;display:flex}.ob-notes-input{resize:none;width:100%;height:72px;color:var(--foreground);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;outline:none;padding:12px 14px;font-size:13px;line-height:1.6;transition:border-color .2s}.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;letter-spacing:.5px;cursor:pointer;border:none;border-radius:14px;width:100%;margin-top:auto;padding:14px;font-size:15px;font-weight:600;transition:all .2s;box-shadow:0 4px 15px #007e734d}.ob-start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #007e7366}.ob-close{width:36px;height:36px;color:var(--foreground-muted);cursor:pointer;z-index:20;background:#ffffff0d;border:none;border-radius:50%;place-items:center;padding:0;transition:all .2s;display:grid;position:absolute;top:16px;right:20px}.ob-close:hover{color:var(--foreground);background:#ffffff1a}@media (max-width:768px){.open-book-2d{border-radius:18px;flex-direction:column;width:min(92vw,440px);height:min(84dvh,720px);min-height:0;max-height:calc(100dvh - 32px);overflow:hidden}.ob-left,.ob-right{min-height:0;padding:20px}.ob-left{background:var(--background-card);border-bottom:1px solid #ffffff0f;border-radius:18px 18px 0 0;flex:none;padding-bottom:16px}.ob-right{border-radius:0 0 18px 18px;flex:auto;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{transition:none;transform:none}.book-front{transform:none}.book-front:after,.book-back,.book-left,.book-right,.book-top,.book-bottom{display:none}}