:root{--bg:#f7f7fb;--card:#fff;--accent:#e63946;--text:#111827;--muted:#6b7280}*{box-sizing:border-box}body,html,#root{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica Neue,Arial}body{background:var(--bg);color:var(--text)}.app{max-width:1100px;margin:28px auto;padding:20px}.header{text-align:center;margin-bottom:20px}.header h1{margin:0;font-size:28px}.subtitle{color:var(--muted);margin-top:6px}.center{text-align:center;padding:40px;border-radius:10px;background:linear-gradient(180deg,#fff,#fff);box-shadow:0 6px 20px #0f172a0f}.error{color:var(--accent)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:18px}.card{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:0 8px 22px #1118270f;display:flex;flex-direction:column;min-height:320px}.card img{width:100%;height:180px;object-fit:cover;background:#e6e9ee}.card-body{padding:12px;flex:1}.card-body h4{margin:0 0 8px;font-size:15px}.price{color:var(--accent);font-weight:600}.btn{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;margin-top:10px}.spinner{width:48px;height:48px;border-radius:50%;border:6px solid #f1f5f9;border-top-color:var(--accent);animation:spin 1s linear infinite;margin:0 auto 12px}@keyframes spin{to{transform:rotate(360deg)}}.footer{text-align:center;color:var(--muted);margin-top:28px;font-size:13px}