*{box-sizing:border-box}:root{color:#1f2937;font-synthesis:none;text-rendering:optimizelegibility;background:#f8fafc;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{background:#f8fafc;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}.app{min-height:100vh}.app-header{color:#fff;background:#172033;padding:56px 24px 48px}.app-header>div{width:min(100%,1000px);margin:0 auto}.eyebrow{letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:.78rem;font-weight:700}.app-header .eyebrow{color:#a5b4fc}h1{margin:0;font-size:clamp(2rem,5vw,3.5rem);line-height:1.1}.subtitle{color:#d1d5db;max-width:620px;margin:16px 0 0;font-size:1.05rem;line-height:1.6}.container{width:min(100% - 32px,1000px);margin:0 auto;padding:40px 0 80px}section{margin-bottom:48px}h2{margin:0 0 20px;font-size:1.4rem}.search-form label{margin-bottom:8px;font-weight:600;display:block}.search-row{gap:12px;display:flex}.search-row input{color:#111827;background:#fff;border:1px solid #cbd5e1;border-radius:8px;flex:1;min-width:0;padding:13px 14px}.search-row input:focus{border-color:#6366f1;outline:3px solid #c7d2fe}.search-row button{color:#fff;background:#4f46e5;border:0;border-radius:8px;padding:13px 22px;font-weight:700}.search-row button:hover{background:#4338ca}.search-row button:focus-visible,button:focus-visible{outline-offset:2px;outline:3px solid #a5b4fc}.results-placeholder{color:#64748b;text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:12px;padding:28px}.results-placeholder p{margin:0}.section-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;display:flex}.section-heading .eyebrow{color:#6366f1}.section-heading h2{margin-bottom:0}.book-count{color:#3730a3;background:#e0e7ff;border-radius:999px;padding:6px 10px;font-size:.85rem;font-weight:700}.empty-state{text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:48px 24px}.empty-icon{margin-bottom:16px;font-size:3rem}.empty-state h3{margin:0 0 10px;font-size:1.35rem}.empty-state p{color:#64748b;max-width:580px;margin:8px auto;line-height:1.6}@media (width<=600px){.app-header{padding:40px 20px}.container{width:min(100% - 24px,1000px);padding-top:28px}.search-row{flex-direction:column}.search-row button{width:100%}.section-heading{flex-direction:column;align-items:flex-start}}.book-result{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;padding:20px}.book-result h3{margin:0 0 6px;font-size:1.1rem}.book-result p{color:#64748b;margin:0}.book-list{gap:16px;display:grid}.book-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;gap:20px;padding:20px;display:flex}.book-cover{background:#e2e8f0;border-radius:6px;flex:0 0 90px;justify-content:center;align-items:center;width:90px;height:130px;font-size:2rem;display:flex;overflow:hidden}.book-cover img{object-fit:cover;width:100%;height:100%}.book-info{flex:1}.book-info h3{margin:0 0 8px;font-size:1.15rem}.book-author{color:#475569;margin:0 0 6px;font-weight:600}.book-year{color:#64748b;margin:0 0 16px;font-size:.9rem}.add-button,.remove-button{border:0;border-radius:7px;padding:10px 14px;font-weight:700}.add-button{color:#fff;background:#4f46e5}.add-button:hover{background:#4338ca}.remove-button{color:#991b1b;background:#fee2e2}.remove-button:hover{background:#fecaca}@media (width<=500px){.book-card{gap:14px;padding:14px}.book-cover{flex-basis:70px;width:70px;height:105px}}.state-card{text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:48px 24px}.state-icon{margin-bottom:16px;font-size:2.8rem}.state-card h3{margin:0 0 10px;font-size:1.35rem}.state-card p{color:#64748b;max-width:560px;margin:8px auto;line-height:1.6}.error-state{background:snow;border-color:#fecaca}.error-state h3{color:#991b1b}.error-state button{color:#fff;background:#b91c1c;border:0;border-radius:7px;margin-top:16px;padding:10px 16px;font-weight:700}.error-state button:hover{background:#991b1b}.loading-state{background:#fafaff;border-color:#c7d2fe}.loading-state h3{color:#3730a3}.demo-section{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:12px;margin-bottom:48px;padding:24px}.demo-header{justify-content:space-between;align-items:center;gap:20px;display:flex}.demo-header h2{margin-bottom:0}.demo-header .eyebrow{color:#6366f1}.demo-header>button{color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:7px;padding:8px 12px;font-weight:600}.demo-description{color:#64748b;margin:12px 0 20px;line-height:1.6}.demo-buttons{flex-wrap:wrap;gap:10px;display:flex}.demo-buttons button{color:#fff;background:#334155;border:0;border-radius:7px;padding:10px 14px;font-weight:600}.demo-buttons button:hover{background:#1e293b}@media (width<=600px){.demo-header{flex-direction:column;align-items:flex-start}.demo-buttons{flex-direction:column}.demo-buttons button{width:100%}}