.library-container{display:flex;flex-direction:column;gap:16px;width:1170px}.library-header{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;gap:24px;padding:32px;border-radius:32px;background-color:var(--white)}.library-header-title{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;gap:16px}.search-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:24px}.search-form{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;gap:4px;flex-wrap:nowrap}.search-form input{padding:8px 16px;height:44px;width:320px;border-radius:12px;border:1px solid var(--gray);font-family:Involve,sans-serif;font-size:14px;font-weight:600;line-height:140%;color:var(--primary);background-color:var(--light-gray);transition:box-shadow .1s ease-in,background-color .3s ease-in}.search-form input::-moz-placeholder{color:var(--tertiary)}.search-form input::placeholder{color:var(--tertiary)}.search-form input:focus{background-color:var(--white);border:1px solid var(--primary-blue);box-shadow:0 16px 48px #005aff14}.search-input-wrapper{position:relative;width:320px}.clear-search{position:absolute;top:50%;right:8px;transform:translateY(-50%);cursor:pointer;display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:999px;background:transparent;transition:background-color .2s ease}.clear-search:hover{background-color:var(--light-gray)}.filter-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:8px 16px;height:44px;border-radius:12px;cursor:pointer;font-family:Involve,sans-serif;font-size:14px;font-weight:600;line-height:140%;letter-spacing:0;background-color:var(--primary);color:var(--white);border:none;transition:background-color .3s,color .3s,transform .2s;white-space:nowrap}.filter-btn:hover{background-color:var(--tertiary)}.filter-btn:active{transform:scale(.95)}.h-divider{height:1px;width:100%;background-color:var(--gray)}.genre-tags-wrapper,.genre-tag,.genre-input-wrapper.hidden{display:none}.library-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 16px}.comic-card{display:flex;flex-direction:column;justify-content:left;width:280px;gap:16px;overflow:hidden}.comic-card>.comic-text-data{display:flex;flex-direction:column;gap:8px}.comic-author-text{color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comic-title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comic-genres{display:flex;flex-wrap:nowrap;overflow:hidden;position:relative;gap:4px}.comic-genre-tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;white-space:nowrap;text-transform:capitalize;border:1px solid var(--primary);color:var(--primary)}.comic-genre-tag.more-genres{background-color:var(--primary);color:var(--white);cursor:default}.cover_wrapper{overflow:hidden;width:100%;aspect-ratio:2/3;border-radius:24px;border:1px solid var(--gray)}.cover_wrapper img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.load-more-container{display:flex;justify-content:center;text-align:center;margin:20px 0}.hidden{visibility:hidden;position:absolute;pointer-events:none;opacity:0}.modal{position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:#00000052;z-index:1000;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease;pointer-events:none}.modal.show{visibility:visible;opacity:1;pointer-events:auto}.modal-content{display:flex;flex-direction:column;gap:16px;border-radius:32px;padding:32px;width:440px;max-height:80vh;overflow-y:auto;position:relative;pointer-events:auto;background:var(--white)}.modal-section{display:flex;flex-direction:column;gap:8px}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-content select,#genre-search{padding:8px 12px;height:44px;border-radius:12px;border:1px solid var(--gray);font-family:Involve,sans-serif;font-size:14px;font-weight:600;line-height:140%;color:var(--primary);background-color:var(--light-gray);transition:box-shadow .1s ease-in,background-color .3s ease-in}.modal-content select::-moz-placeholder,#genre-search::-moz-placeholder{color:var(--tertiary)}.modal-content select::placeholder,#genre-search::placeholder{color:var(--tertiary)}.modal-content select:focus,#genre-search:focus{background-color:var(--white);border:1px solid var(--primary-blue);box-shadow:0 16px 48px #005aff14}.modal-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;width:44px;height:44px;border-radius:999px;transition:all .2s ease}.modal-close:hover{background-color:var(--light-gray)}.selected-genres-wrapper{display:flex;flex-wrap:wrap;gap:4px}.selected-genre-tag{display:flex;align-items:center;padding:8px 16px;border-radius:999px;gap:8px;background-color:var(--primary);color:var(--white)}.selected-genre-tag .remove-genre{color:var(--white);cursor:pointer;transition:all .2s ease}.selected-genre-tag:hover{background-color:var(--secondary)}#genre-options{display:none}option{font-weight:600}.suggestion-box{position:absolute;z-index:1000;background:var(--white);max-height:200px;overflow-y:auto;width:280px;box-shadow:0 2px 32px #00000014;margin-top:64px;padding:8px;border-radius:16px}.suggestion-item{padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .2s ease}.suggestion-item:hover{color:var(--primary-blue);background-color:var(--light-gray)}@media (max-width: 1200px) and (min-width: 960px){.library-container{width:940px}.library-header{padding:32px;border-radius:32px}.search-form{gap:4px}.search-form input{padding:6px 12px;height:40px}.library-grid{gap:24px 12px}.modal-content{padding:32px;border-radius:32px}.modal-content select,#genre-search{padding:6px 12px;height:40px}.modal-close{width:36px;height:36px}.filter-btn{padding:6px 12px;height:40px;font-size:14px}.cover_wrapper{aspect-ratio:2/3;border-radius:20px}.comic-card{width:220px}}@media (max-width: 960px){.library-container{width:640px}.library-header{padding:24px;border-radius:24px}.search-form{gap:2px}.search-form input{width:100%;padding:6px 12px;height:40px}.search-input-wrapper{width:100%}.library-grid{gap:20px 10px}.modal-content{padding:24px;border-radius:24px;width:400px}.modal-content select,#genre-search{padding:6px 12px;height:40px}.modal-close{width:36px;height:36px}.filter-btn{padding:6px 12px;height:40px;font-size:14px}.cover_wrapper{aspect-ratio:2/3;border-radius:18px}.comic-card{width:180px}.selected-genre-tag,.comic-genre-tag{padding:6px 8px}}@media (max-width: 640px) and (min-width: 480px){.library-container{width:480px}.search-form input{padding:5px 10px;height:40px}.library-grid{gap:16px 8px}.modal-content select,#genre-search{padding:5px 10px;height:40px}.modal-close{width:32px;height:32px}.filter-btn{padding:4px 12px;font-size:12px}.cover_wrapper{aspect-ratio:2/3;border-radius:16px}.comic-card{width:140px}.selected-genre-tag,.comic-genre-tag{padding:4px 6px}}@media (max-width: 480px){.library-container{width:320px}.library-header{padding:16px;border-radius:20px}.search-form input{padding:4px 8px;height:40px}.library-grid{gap:12px 6px}.modal-content{padding:16px;border-radius:20px;width:320px}.modal-content select,#genre-search{padding:4px 8px;height:40px}.modal-close{width:28px;height:28px}.filter-btn{padding:4px 12px;height:40px;font-size:12px}.cover_wrapper{aspect-ratio:2/3;border-radius:12px}.comic-card{width:120px}.selected-genre-tag,.comic-genre-tag{padding:2px 4px}}