:root{color:#1f2937;background:#f8fafc;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}#root{min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:1rem}.app__header{text-align:center;margin-bottom:1rem}.app__header h1{margin:0;font-size:clamp(1.8rem,4vw,2.8rem)}.app__header p{color:#4b5563;margin-top:.5rem}.controls{grid-template-columns:1fr;gap:.75rem;margin:1.25rem 0;display:grid}.control-input{border:1px solid #d1d5db;border-radius:.6rem;width:100%;padding:.65rem .75rem;font-size:1rem}.pokemon-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;display:grid}.pokemon-card{background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;transition:transform .15s;position:relative;box-shadow:0 3px 10px #0000000f}.pokemon-card:hover{transform:translateY(-3px)}.pokemon-card__main{cursor:pointer;background:0 0;border:0;width:100%;padding:1rem .8rem}.pokemon-card h2{text-transform:capitalize;margin:.5rem 0 .3rem;font-size:1.05rem}.pokemon-card__image{object-fit:contain;width:100%;max-width:120px;height:120px}.pokemon-types{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.pokemon-types span{text-transform:capitalize;color:#1d4ed8;background:#eff6ff;border-radius:999px;padding:.2rem .55rem;font-size:.75rem}.favorite-btn{cursor:pointer;background:#f3f4f6;border:0;border-radius:999px;width:32px;height:32px;font-size:1rem;position:absolute;top:.45rem;right:.45rem}.favorite-btn--active{color:#ca8a04;background:#fef9c3}.pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem;margin:1.2rem 0;display:flex}.pagination button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:.5rem;padding:.45rem .85rem}.pagination button:disabled{cursor:not-allowed;background:#94a3b8}.message{text-align:center;margin:1rem 0}.message--error{color:#dc2626}.modal-overlay{background:#0000008c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:1rem;width:min(520px,100%);padding:1rem}.modal__close{cursor:pointer;border:0;border-radius:.5rem;margin-left:auto;padding:.35rem .65rem;display:block}.modal__header{align-items:center;gap:1rem;display:flex}.modal__header img{object-fit:contain;width:120px;height:120px}.modal__header h3{text-transform:capitalize;margin:0}.modal__section{margin-top:.75rem}.modal__section ul{margin:.4rem 0 0;padding-left:1.1rem}@media (width>=720px){.controls{grid-template-columns:2fr 1fr}}
