body{margin:0;padding:0}*{margin:0;padding:0;box-sizing:border-box}html{overflow-y:scroll;min-height:100%}html:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:#2a1a08;background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.35) 2px,rgba(0,0,0,.35) 3px,transparent 3px,transparent 6px,rgba(180,110,40,.12) 6px,rgba(180,110,40,.12) 7px,transparent 7px,transparent 11px,rgba(0,0,0,.2) 11px,rgba(0,0,0,.2) 12px),repeating-linear-gradient(0deg,transparent 0px,transparent 18px,rgba(0,0,0,.18) 18px,rgba(0,0,0,.18) 21px,transparent 21px,transparent 38px,rgba(160,90,25,.1) 38px,rgba(160,90,25,.1) 40px),repeating-linear-gradient(0deg,#321c08,#241406,#301c09,#201205,#341e09 180px);pointer-events:none}body{background:transparent;min-height:100vh;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}.app{max-width:1300px;margin:0 auto;padding:4rem 2rem 6rem}header{margin-bottom:3rem;border-bottom:1px solid #3d2a14;padding-bottom:1.5rem}header h1{font-size:1.75rem;font-weight:400;color:#c9a96e;margin-bottom:.5rem;letter-spacing:-.01em;text-align:center}.rotating-subgenre{text-align:center;margin-bottom:1.25rem;margin-top:.75rem}.subgenre-label{font-size:.85rem;color:#7a6040;font-weight:400;font-style:normal;letter-spacing:.01em;margin-bottom:.25rem}.subgenre-text{font-size:.9rem;color:#c9a96e;font-weight:500;font-style:normal;animation:fadeInOut 3s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-5px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(5px)}}.subtitle{font-size:.85rem;color:#7a6040;text-align:center;margin-bottom:0;font-weight:400;letter-spacing:.01em}.section-divider{border:none;height:8px;background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 Q 5 1, 10 4 T 20 4 T 30 4 T 40 4 T 50 4 T 60 4 T 70 4 T 80 4 T 90 4 T 100 4 T 110 4 T 120 4 T 130 4 T 140 4 T 150 4 T 160 4 T 170 4 T 180 4 T 190 4 T 200 4 T 210 4 T 220 4 T 230 4 T 240 4 T 250 4 T 260 4 T 270 4 T 280 4 T 290 4 T 300 4 T 310 4 T 320 4 T 330 4 T 340 4 T 350 4 T 360 4 T 370 4 T 380 4 T 390 4 T 400 4 T 410 4 T 420 4 T 430 4 T 440 4 T 450 4 T 460 4 T 470 4 T 480 4' stroke='%23c9a96e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 100%;margin:1.25rem auto 1rem;max-width:480px}.header-controls{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.filter-nav{display:flex;gap:.2rem;flex-wrap:wrap;justify-content:center}.custom-dropdown{position:relative;display:inline-block}.custom-dropdown-trigger{background:none;border:1px solid transparent;padding:.3rem 1.8rem .3rem .85rem;border-radius:20px;font-size:.85rem;color:#7a6040;cursor:pointer;font-family:inherit;transition:all .15s ease;position:relative;white-space:nowrap}.custom-dropdown-trigger:hover:not(:disabled){color:#c9a96e;border-color:#5a4020}.custom-dropdown-trigger:focus{outline:none}.dropdown-arrow{position:absolute;right:.65rem;top:50%;transform:translateY(-50%);font-size:.7rem;opacity:.7;pointer-events:none}.custom-dropdown-menu{position:absolute;top:calc(100% + .25rem);left:0;min-width:100%;background:#2a1a08;border:1px solid #3d2a14;border-radius:12px;padding:.35rem;z-index:100;box-shadow:0 4px 12px #00000080}.custom-dropdown-option{background:none;border:1px solid transparent;padding:.4rem .85rem;border-radius:8px;font-size:.85rem;color:#7a6040;cursor:pointer;font-family:inherit;transition:all .15s ease;width:100%;text-align:left;white-space:nowrap}.custom-dropdown-option:hover{color:#c9a96e;border-color:#5a4020}.custom-dropdown-option.active{color:#e8c990;border-color:#7a5c30;background:#2e1f0e}.custom-dropdown--disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.filter-btn{background:none;border:1px solid transparent;padding:.3rem .85rem;border-radius:20px;font-size:.85rem;color:#7a6040;cursor:pointer;transition:all .15s ease}.filter-btn:hover{color:#c9a96e;border-color:#5a4020}.filter-btn.active{color:#e8c990;border-color:#7a5c30;background:#2e1f0e}.filter-count{color:inherit;opacity:.6}.reading-goal{margin-top:1rem;margin-bottom:.75rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.reading-goal-bar-wrap{width:100%;max-width:480px;height:4px;background:#2e1f0e;border-radius:2px;overflow:hidden}.reading-goal-bar{height:100%;background:#c9a96e;border-radius:2px;transition:width .6s ease}.reading-goal-label{font-size:.78rem;color:#7a6040;letter-spacing:.03em}.book-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3rem 1.5rem}.book-grid:after{content:"";display:none}@media(max-width:1100px){.book-grid{grid-template-columns:repeat(5,1fr)}}@media(max-width:860px){.book-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:640px){.book-grid{grid-template-columns:repeat(3,1fr)}.app{padding:2rem 1rem 4rem}}.shelf-divider{grid-column:1 / -1;height:16px;background:linear-gradient(180deg,#5c3410,#3d2008 40%,#2a1506);border-radius:2px;margin-top:-3rem;position:relative;z-index:2;box-shadow:0 6px 16px #000000b3,0 1px #ffffff14 inset,0 -2px 4px #0006 inset}.book-card{background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;width:100%;overflow:visible;position:relative}.book-cover-wrap{width:100%}.book-cover{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:3px;box-shadow:0 4px 16px #00000080;transition:box-shadow .35s ease}.book-card:hover .book-cover{box-shadow:0 4px 16px #00000080,0 0 22px 8px #d29b378c}.no-cover{width:100%;aspect-ratio:2/3;background-color:#7a4020;background-image:linear-gradient(170deg,#8c5228e6,#50260ad9,#643412e6),repeating-linear-gradient(174deg,transparent 0px,transparent 3px,rgba(0,0,0,.09) 3px,rgba(0,0,0,.09) 4px,transparent 4px,transparent 8px,rgba(255,180,80,.05) 8px,rgba(255,180,80,.05) 9px),repeating-linear-gradient(171deg,transparent 0px,transparent 11px,rgba(0,0,0,.07) 11px,rgba(0,0,0,.07) 13px,transparent 13px,transparent 22px,rgba(255,160,60,.04) 22px,rgba(255,160,60,.04) 23px),repeating-linear-gradient(177deg,transparent 0px,transparent 28px,rgba(0,0,0,.06) 28px,rgba(0,0,0,.06) 32px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.75rem .6rem;border-radius:3px;border-left:5px solid #f0b040;box-shadow:0 4px 16px #000000b3,inset -6px 0 16px #0009,inset 2px 0 6px #ffc8641a;transition:box-shadow .35s ease;gap:.4rem}.book-card:hover .no-cover{box-shadow:0 4px 16px #000000b3,0 0 22px 8px #d29b378c,inset -6px 0 16px #0009,inset 2px 0 6px #ffc8641a}.no-cover:before{content:"📖";font-size:1.2rem;opacity:.9}.no-cover-title{font-size:.6rem;color:#f0d090;text-align:center;line-height:1.5;letter-spacing:.02em;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;text-shadow:0 1px 4px rgba(0,0,0,.9)}.book-info{position:absolute;top:calc(100% + 20px);left:0;right:0;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease;text-align:center;z-index:10}.book-card:hover .book-info{opacity:1;transform:translateY(0)}.book-title{font-size:.8rem;font-weight:500;color:#e8c990;margin-bottom:.15rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.book-author{font-size:.75rem;color:#7a6040;margin-bottom:.3rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.stars-display{font-size:.85rem}.stars-filled{color:#c9a96e}.stars-empty{color:#3d2a14}.loading{max-width:1300px;margin:0 auto;padding:4rem 2rem;background:#1a1008}.loading-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3rem 1.5rem}.skeleton{aspect-ratio:2/3;background:linear-gradient(90deg,#2a1a0a 25%,#1e1206,#2a1a0a 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:3px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.empty{text-align:center;color:#5a4020;font-size:.9rem;padding:4rem 0}.modal-overlay{position:fixed;inset:0;background:#0009;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:#1e1408;border:1px solid #3d2a14;border-radius:16px;width:min(780px,90vw);max-height:85vh;overflow:hidden;padding:2.5rem;position:relative;animation:scaleIn .2s ease;box-shadow:0 4px 36px #00000026}@keyframes scaleIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.modal-close{position:absolute;top:1.25rem;right:1.25rem;background:#ffffff14;border:none;width:32px;height:32px;border-radius:50%;font-size:1.25rem;line-height:1;cursor:pointer;color:#7a6040;display:flex;align-items:center;justify-content:center;transition:background .15s}.modal-close:hover{background:#ffffff26}.modal-body{display:flex;gap:2rem}@media(max-width:560px){.modal-body{flex-direction:column;align-items:center}.modal{padding:1.75rem}}.modal-cover-wrap{flex-shrink:0}.modal-cover{width:142px;height:219px;object-fit:cover;border-radius:6px;box-shadow:0 4px 12px #0000001f;display:block}.modal-details{flex:1;display:flex;flex-direction:column;gap:.5rem}.modal-title{font-size:1.2rem;font-weight:500;color:#e8c990;line-height:1.3}.modal-author{font-size:1rem;color:#7a6040;margin-bottom:.75rem}.modal-meta{display:flex;flex-direction:column;gap:.5rem}.meta-inline{display:flex;align-items:center;gap:.75rem}.meta-date{font-size:.82rem;color:#7a6040;letter-spacing:.01em}.modal-meta .stars-display{font-size:1.1rem}.modal-meta .stars-filled{color:#c9a96e}.modal-meta .stars-empty{color:#3d2a14}.shelf-tag{background:#2e1f0e;color:#c9a96e;font-size:.75rem;padding:.2rem .65rem;border-radius:20px;letter-spacing:.03em}.modal-divider{height:1px;background:#3d2a14;margin:1.25rem 0 1rem}.modal-review-section{display:flex;flex-direction:column;gap:.5rem}.review-label{font-size:.8rem;font-weight:500;color:#5a4020;text-transform:lowercase;letter-spacing:.04em}.modal-review{font-size:.95rem;color:#b8956a;line-height:1.7;white-space:pre-wrap;max-height:300px;overflow-y:auto;margin-right:-2.5rem;padding-right:2.5rem}.modal-review::-webkit-scrollbar{width:8px}.modal-review::-webkit-scrollbar-track{background:#3d2a144d;border-radius:3px}.modal-review::-webkit-scrollbar-thumb{background:#5a4020;border-radius:3px}.modal-review::-webkit-scrollbar-thumb:hover{background:#7a6040}.suggestion-box{display:block;margin:4rem auto 2rem;max-width:400px;text-decoration:none;cursor:pointer;transition:transform .2s ease}.suggestion-box:hover{transform:translateY(-4px)}.suggestion-box-slot{background:linear-gradient(135deg,#3d2814,#5a3a1e,#3d2814);border:2px solid #2a1a08;border-radius:12px;padding:3rem 2rem;box-shadow:inset 0 2px 8px #0006,0 4px 12px #00000080;position:relative;overflow:hidden}.slot-opening{width:80%;height:6px;background:linear-gradient(to bottom,#1a0f05,#0d0703);margin:0 auto 1.5rem;border-radius:3px;box-shadow:inset 0 2px 4px #000c,0 1px #ffffff1a;position:relative}.slot-opening:before{content:"";position:absolute;top:-4px;left:-10%;right:-10%;height:14px;background:linear-gradient(to bottom,rgba(80,50,20,.3) 0%,transparent 50%,rgba(0,0,0,.2) 100%);border-radius:8px}.suggestion-label{color:#d4a876;font-size:.95rem;font-weight:500;text-align:center;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.3);-webkit-user-select:none;user-select:none}.suggestion-box:hover .suggestion-label{color:#e6c094}.suggestion-box-slot:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0px,rgba(0,0,0,.03) 1px,transparent 2px,transparent 8px);pointer-events:none}