*{box-sizing:border-box;margin:0;padding:0}:root{--color-primary:#c9a982;--color-primary-dark:#a68b6f;--color-primary-light:#e8dcc6;--color-accent:#d4a574;--color-accent-soft:#f5e6d3;--color-text:#3d3528;--color-text-light:#8b7d6b;--color-text-muted:#b8a99a;--color-bg:#faf8f5;--color-bg-alt:#f5f1eb;--color-bg-card:#fff;--color-bg-warm:#fefcf9;--color-border:#e8ddd0;--color-border-soft:#f0e8dd;--color-border-focus:#c9a982;--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--border-radius:1rem;--border-radius-sm:0.75rem;--border-radius-lg:1.5rem;--shadow-sm:0 2px 8px hsla(33,40%,65%,.08);--shadow-md:0 4px 16px hsla(33,40%,65%,.12);--shadow-lg:0 8px 24px hsla(33,40%,65%,.15);--shadow-soft:0 2px 12px hsla(33,40%,65%,.1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color-text);background:linear-gradient(135deg,#faf8f5,#f5f1eb);background-attachment:fixed;min-height:100vh;line-height:1.7;letter-spacing:-.01em}.skip-link{position:fixed;top:-100px;left:1rem;background:var(--color-primary);color:#fff;padding:.75rem 1.25rem;text-decoration:none;z-index:1000;border-radius:var(--border-radius-lg);font-weight:500;transition:top .3s ease;box-shadow:var(--shadow-md)}.skip-link:focus{top:1rem;outline:3px solid hsla(33,40%,65%,.5);outline-offset:2px}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.header{background:linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(36,33%,97%,.6));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border-soft);padding:var(--spacing-lg) 0;margin-bottom:var(--spacing-lg);position:relative;transition:all .3s ease}.header.sticky-header{position:-webkit-sticky;position:sticky;top:0;z-index:100;margin-bottom:0;padding:var(--spacing-md) 0;box-shadow:0 2px 12px hsla(33,40%,65%,.08)}.header.sticky-header:after{bottom:0}.header.sticky-header:after,.header:before{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-border),transparent)}.header:before{top:0}.header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.header-title-section{flex:1 1}.header h1{font-size:2rem;font-weight:600;color:var(--color-text);margin-bottom:.25rem;letter-spacing:-.02em;background:linear-gradient(135deg,var(--color-text) 0,var(--color-primary-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.header.sticky-header h1{font-size:1.5rem;margin-bottom:0}.header p{color:var(--color-text-light);font-size:.95rem;font-weight:400;margin:0}.header.sticky-header p{font-size:.85rem}.header-error{color:#a68b6f;font-size:.8rem;margin-top:.5rem;font-weight:400}.header-refresh-btn{padding:.5rem .75rem;background:hsla(33,40%,65%,.1);color:#8b7d6b;border:1.5px solid hsla(33,40%,65%,.3);border-radius:var(--border-radius);cursor:pointer;font-size:1.1rem;transition:all .3s ease;box-shadow:0 2px 8px hsla(33,40%,65%,.08);flex-shrink:0;line-height:1}.header-refresh-btn:hover:not(:disabled){background:hsla(33,40%,65%,.15);transform:translateY(-1px);box-shadow:0 4px 12px hsla(33,40%,65%,.12)}.header-refresh-btn:disabled{opacity:.5;cursor:not-allowed}.search-section{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.search-bar{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-wrap:wrap}.search-input{flex:1 1;min-width:200px;padding:.875rem 1.25rem;font-size:1rem;border:1.5px solid var(--color-border);border-radius:var(--border-radius-lg);background-color:var(--color-bg-card);color:var(--color-text);transition:all .3s ease;box-shadow:var(--shadow-sm)}.search-input::placeholder{color:var(--color-text-muted)}.search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-soft),0 0 0 4px hsla(33,40%,65%,.1);background-color:var(--color-bg-warm);transform:translateY(-1px)}.genre-filter{font-size:1rem;border:1.5px solid var(--color-border);border-radius:var(--border-radius-lg);background-color:var(--color-bg-card);color:var(--color-text);cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c9a982' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding:.875rem 2.5rem .875rem 1.25rem}.genre-filter:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-soft)}.genre-filter:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-soft),0 0 0 4px hsla(33,40%,65%,.1);background-color:var(--color-bg-warm)}.results-count{color:var(--color-text-light);font-size:.9rem;margin-bottom:var(--spacing-md);font-weight:400;letter-spacing:.01em}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:var(--spacing-lg);gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.book-card{background:linear-gradient(135deg,var(--color-bg-card) 0,var(--color-bg-warm) 100%);border:1.5px solid var(--color-border-soft);border-radius:var(--border-radius-lg);padding:var(--spacing-md) var(--spacing-lg);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;animation:fadeInUp .6s ease-out backwards}.book-card:first-child{animation-delay:.05s}.book-card:nth-child(2){animation-delay:.1s}.book-card:nth-child(3){animation-delay:.15s}.book-card:nth-child(4){animation-delay:.2s}.book-card:nth-child(5){animation-delay:.25s}.book-card:nth-child(6){animation-delay:.3s}.book-card:nth-child(n+7){animation-delay:.35s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.book-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary-light),var(--color-accent),var(--color-primary-light));opacity:0;transition:opacity .4s ease}.book-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--color-primary-light)}.book-card:hover:before{opacity:1}.book-card h2{font-size:1.35rem;font-weight:600;margin-bottom:var(--spacing-xs);color:var(--color-text);line-height:1.4;letter-spacing:-.01em}.book-card p{color:var(--color-text-light);font-size:.9rem;margin-bottom:var(--spacing-sm);line-height:1.6}.book-genre{display:inline-block;background:linear-gradient(135deg,var(--color-accent-soft) 0,var(--color-primary-light) 100%);color:var(--color-primary-dark);padding:.4rem 1rem;border-radius:var(--border-radius-lg);font-size:.8rem;font-weight:500;margin-top:var(--spacing-xs);border:1px solid var(--color-border-soft);box-shadow:var(--shadow-sm);transition:all .3s ease}.book-genre:hover{transform:scale(1.05);box-shadow:var(--shadow-soft)}.empty-state{text-align:center;padding:var(--spacing-xl) var(--spacing-md);color:var(--color-text-light);background:linear-gradient(135deg,hsla(0,0%,100%,.6),hsla(36,33%,97%,.4));border-radius:var(--border-radius-lg);border:1.5px dashed var(--color-border);margin:var(--spacing-lg) 0}.empty-state h2{font-size:1.75rem;margin-bottom:var(--spacing-sm);color:var(--color-text);font-weight:500;letter-spacing:-.01em}.btn-primary,.btn-secondary{margin-top:1rem;padding:.75rem 1.5rem;border:none;border-radius:1rem;cursor:pointer;font-size:1rem;font-weight:500;transition:all .3s ease}.btn-primary{background-color:#c9a982;color:#fff;box-shadow:0 4px 12px hsla(33,40%,65%,.2)}.btn-primary:hover{background-color:#a68b6f;transform:translateY(-2px);box-shadow:0 6px 16px hsla(33,40%,65%,.3)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:hsla(33,40%,65%,.1);color:#8b7d6b;border:1.5px solid hsla(33,40%,65%,.3);box-shadow:0 2px 8px hsla(33,40%,65%,.08)}.btn-secondary:hover{background-color:hsla(33,40%,65%,.15);transform:translateY(-1px);box-shadow:0 4px 12px hsla(33,40%,65%,.12)}.btn-secondary:active{transform:translateY(0)}.loading{text-align:center;padding:var(--spacing-xl);color:var(--color-text-light)}.loading:after{content:"...";animation:dots 1.5s steps(4) infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.pagination{margin:var(--spacing-xl) 0;padding:var(--spacing-lg);background:linear-gradient(135deg,hsla(0,0%,100%,.6),hsla(36,33%,97%,.4));border-radius:var(--border-radius-lg);border:1.5px solid var(--color-border-soft)}.pagination-controls{display:flex;align-items:center;justify-content:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-md);flex-wrap:wrap}.pagination-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,var(--color-bg-card) 0,var(--color-bg-warm) 100%);color:var(--color-text);border:1.5px solid var(--color-border);border-radius:var(--border-radius-lg);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .3s ease;box-shadow:var(--shadow-sm)}.pagination-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-light) 0,var(--color-accent-soft) 100%);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.pagination-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.pagination-info{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--color-text);font-weight:500}.pagination-count{font-size:.85rem;color:var(--color-text-light);font-weight:400}.pagination-size{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding-top:var(--spacing-md);border-top:1px solid var(--color-border-soft)}.pagination-size label{color:var(--color-text-light);font-size:.9rem}.pagination-select{padding:.5rem 1rem;border:1.5px solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-bg-card);color:var(--color-text);font-size:.9rem;cursor:pointer;transition:all .3s ease}.pagination-select:focus,.pagination-select:hover{border-color:var(--color-primary);outline:none;box-shadow:var(--shadow-soft)}.back-to-top{position:fixed;bottom:2rem;right:2rem;width:3.5rem;height:3.5rem;background:linear-gradient(135deg,var(--color-primary) 0,var(--color-accent) 100%);color:#fff;border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;z-index:999;box-shadow:var(--shadow-lg);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;animation:fadeInUp .4s ease-out}.back-to-top:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px hsla(33,40%,65%,.4)}.back-to-top:active{transform:translateY(-2px) scale(1)}.footer{border-top:1px solid var(--color-border-soft);padding:var(--spacing-xl) 0;margin-top:var(--spacing-xl);text-align:center;color:var(--color-text-muted);font-size:.875rem;background:linear-gradient(180deg,transparent,hsla(36,33%,97%,.5));position:relative}.footer:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary-light),transparent)}@media (max-width:768px){.book-grid{grid-template-columns:1fr}.search-bar{flex-direction:column}.genre-filter,.search-input{width:100%}.header h1{font-size:1.5rem}.header.sticky-header h1{font-size:1.25rem}.header-content{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.header-refresh-btn{align-self:flex-end;margin-top:-2.5rem}.pagination-controls{flex-direction:column;gap:var(--spacing-md)}.pagination-info{order:-1}.back-to-top{bottom:1.5rem;right:1.5rem;width:3rem;height:3rem;font-size:1.25rem}.skip-link{left:.5rem;padding:.625rem 1rem;font-size:.875rem}}@media (prefers-contrast:high){:root{--color-border:#000;--color-text-light:#000}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.book-card{animation:none!important}}html{scroll-behavior:smooth}::selection{background-color:hsla(33,40%,65%,.3);color:var(--color-text)}::-moz-selection{background-color:hsla(33,40%,65%,.3);color:var(--color-text)}