body{margin:0}*{box-sizing:border-box;margin:0;padding:0}:root{--cream:#faf8f3;--warm-black:#1a1614;--warm-gray:#6b6560;--sage:#8a9a7e;--terracotta:#c97d60;--gold:#d4a574;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-2xl:4rem}body{background:var(--cream);color:var(--warm-black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Georgia,Palatino Linotype,Book Antiqua,serif;line-height:1.6}.app{min-height:100vh}.header{background:linear-gradient(to bottom, var(--warm-black) 0%, #2a2320 100%);color:var(--cream);padding:var(--spacing-xl) var(--spacing-md);text-align:center;border-bottom:3px solid var(--gold)}.header h1{letter-spacing:.02em;margin-bottom:var(--spacing-sm);font-size:clamp(2rem,5vw,3.5rem);font-style:italic;font-weight:400}.header p{color:#e8e4dd;max-width:600px;margin:0 auto;font-size:clamp(1rem,2vw,1.25rem);font-weight:300;line-height:1.7}.controls{padding:var(--spacing-lg) var(--spacing-md);z-index:100;background:#fff;border-bottom:1px solid #e5dfd5;position:sticky;top:0;box-shadow:0 2px 8px #1a16140d}.controls-inner{max-width:1400px;margin:0 auto}.search-box{margin-bottom:var(--spacing-md)}.search-box input{width:100%;padding:var(--spacing-sm);background:var(--cream);color:var(--warm-black);border:2px solid #e5dfd5;border-radius:4px;font-family:inherit;font-size:1rem;transition:border-color .2s}.search-box input:focus{border-color:var(--sage);outline:none}.search-box input::placeholder{color:var(--warm-gray);opacity:.7}.filters{gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);flex-wrap:wrap;display:flex}.filter-group{flex:1;min-width:200px}.filter-group label{color:var(--warm-gray);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:600;display:block}.filter-group select{width:100%;padding:var(--spacing-xs) var(--spacing-sm);color:var(--warm-black);cursor:pointer;background:#fff;border:2px solid #e5dfd5;border-radius:4px;font-family:inherit;font-size:.9375rem;transition:border-color .2s}.filter-group select:focus{border-color:var(--sage);outline:none}.results-count{color:var(--warm-gray);font-size:.875rem;font-style:italic}.book-grid{max-width:1400px;padding:var(--spacing-xl) var(--spacing-md);gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin:0 auto;display:grid}@media (width>=640px){.book-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}@media (width>=1024px){.book-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}.book-card{color:inherit;text-decoration:none;transition:transform .2s;display:block}.book-card:hover{transform:translateY(-4px)}.book-cover-container{width:100%;margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,#f5f1ea 0%,#e5dfd5 100%);border-radius:4px;padding-bottom:150%;position:relative;overflow:hidden;box-shadow:0 4px 12px #1a161426}.book-card:hover .book-cover-container{box-shadow:0 8px 24px #1a161440}.book-cover{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.book-cover-placeholder{width:100%;height:100%;padding:var(--spacing-md);text-align:center;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.book-cover-placeholder-title{color:var(--warm-gray);font-size:.875rem;font-style:italic;line-height:1.4}.book-info{padding:0 var(--spacing-xs)}.book-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.25rem;font-size:.9375rem;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.book-author{color:var(--warm-gray);margin-bottom:var(--spacing-xs);-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:.875rem;font-style:italic;display:-webkit-box;overflow:hidden}.book-meta{flex-wrap:wrap;gap:.375rem;font-size:.75rem;display:flex}.book-badge{letter-spacing:.02em;white-space:nowrap;border-radius:3px;padding:.25rem .5rem;font-weight:600}.badge-age{color:var(--warm-black);background:#f0ede5}.badge-type{background:var(--sage);color:#fff}.empty-state{text-align:center;padding:var(--spacing-2xl) var(--spacing-md);color:var(--warm-gray)}.empty-state p{font-size:1.125rem;font-style:italic}.loading{text-align:center;padding:var(--spacing-2xl);color:var(--warm-gray);font-style:italic}.footer{background:var(--warm-black);color:#e8e4dd;padding:var(--spacing-xl) var(--spacing-md);text-align:center;border-top:3px solid var(--gold);font-size:.875rem}.footer a{color:var(--gold);text-decoration:none}.footer a:hover{text-decoration:underline}