:root{--navbar-height:4rem;--container-width:960px;--color-primary:#8cc63f;--color-primary-dark:#6fa32e;--color-accent:#f97316;--color-bg:#f6fced;--color-text:#2d2d2d;--color-text-muted:#6b7280;--radius:.5rem}body{background-color:var(--color-bg);color:var(--color-text);margin:0;font-family:system-ui,sans-serif}a{color:var(--color-accent);font-weight:600;text-decoration:none}a:hover{text-decoration:underline}.navbar{height:var(--navbar-height);background-color:var(--color-primary);position:sticky;top:0;box-shadow:0 2px 6px #00000026}.navbar .navbar-inner{max-width:var(--container-width);box-sizing:border-box;flex-direction:row;justify-content:space-between;align-items:stretch;height:100%;margin:0 auto;padding:0 1.5rem;display:flex}.navbar>.navbar-inner>.logo{align-items:center;display:flex}.navbar>.navbar-inner>.logo img{height:calc(var(--navbar-height) - 1rem)}.navbar .navbar-inner .end{align-items:center;gap:1.5rem;display:flex}.navbar .navbar-inner .end a{color:#fff;letter-spacing:.02em;align-items:center;gap:.4rem;font-weight:700;display:flex}.navbar .navbar-inner .end a:hover{opacity:.85;text-decoration:none}.navbar .navbar-inner .end .nav-badge{color:var(--color-primary-dark);background:#fff;border-radius:999px;padding:.2rem .5rem;font-size:.75rem;font-weight:800;line-height:1}main{height:calc(100vh - var(--navbar-height));max-width:var(--container-width);box-sizing:border-box;margin:0 auto;padding:2rem 1.5rem}.btn{border-radius:var(--radius);cursor:pointer;border:none;padding:.65rem 1.5rem;font-size:1rem;font-weight:700;text-decoration:none;transition:opacity .15s;display:inline-block}.btn:hover:not(:disabled){opacity:.85;text-decoration:none}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--color-accent);color:#fff}.btn-secondary{background:var(--color-primary);color:#fff}.index{justify-content:center;align-items:center;height:100%;display:flex}.index .hero{text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex}.index .hero .logo{width:460px;animation:2.5s ease-in-out infinite alternate pulse}.index .hero p{color:var(--color-text-muted);margin:0;font-size:1.1rem}.index .hero .actions{gap:1rem;margin-top:.5rem;display:flex}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.05,.95)}}.breadcrumb{flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;display:flex}.breadcrumb-item{align-items:center;gap:.5rem;display:flex}.breadcrumb-sep{color:var(--color-text-muted)}.breadcrumb-current{color:var(--color-text-muted);text-transform:capitalize}.pokemons-layout{flex-direction:column;gap:1.5rem;display:flex}.loading{justify-content:center;align-items:center;padding:4rem 0;display:flex}.loading-spinner{border:3px solid #e5e7eb;border-top-color:var(--color-primary);border-radius:50%;width:2.5rem;height:2.5rem;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.modal{border-radius:var(--radius);border:none;width:100%;max-width:400px;padding:2rem;box-shadow:0 8px 32px #0000002e}.modal::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0006}.modal-title{margin:0 0 .75rem;font-size:1.2rem}.modal-body{color:var(--color-text-muted);margin:0 0 1.5rem}.modal-actions{justify-content:flex-end;gap:.75rem;display:flex}.pokemon-card{border-radius:var(--radius);background:#fff;border:2px solid #0000;flex:1;transition:border-color .15s,box-shadow .15s;display:flex;position:relative;box-shadow:0 1px 4px #00000014}.pokemon-card:hover{border-color:var(--color-primary);box-shadow:0 2px 8px #8cc63f4d}.pokemon-card-link{color:var(--color-text);text-transform:capitalize;flex-direction:column;flex:1;justify-content:space-between;align-items:center;gap:.25rem;padding:.75rem .5rem;font-size:.85rem;font-weight:600;text-decoration:none;display:flex}.pokemon-card-link:hover{text-decoration:none}.pokemon-card-heart{cursor:pointer;color:var(--color-accent);opacity:0;background:0 0;border:none;padding:.15rem;font-size:1rem;line-height:1;transition:opacity .15s,transform .1s;position:absolute;top:.3rem;right:.3rem}.pokemon-card-heart:hover{transform:scale(1.2)}.pokemon-card-heart.pokemon-card-heart--active{opacity:1}.pokemon-card:hover .pokemon-card-heart{opacity:1}.pokemon-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid}@media (width<=360px){.pokemon-grid{grid-template-columns:1fr}}.pokemon-grid li{display:flex}.pokemons-empty{color:var(--color-text-muted);margin:0}.pokemons{flex-direction:column;gap:1.5rem;display:flex}.pokemons input{border:2px solid var(--color-primary);border-radius:var(--radius);box-sizing:border-box;background:#fff;outline:none;width:100%;padding:.65rem 1rem;font-size:1rem}.pokemons input:focus{border-color:var(--color-primary-dark)}.pokemons .pagination-row{justify-content:space-between;align-items:center;display:flex}.pokemons .pagination-info{color:var(--color-text-muted);font-size:.875rem}.pokemons .pagination{gap:.75rem;display:flex}.error-message{border-radius:var(--radius);color:#991b1b;background:#fef2f2;border:2px solid #f87171;padding:1rem 1.25rem}.error-message strong{font-size:1rem}.error-message p{margin:.4rem 0 0;font-size:.9rem}.error-message ul{flex-direction:column;gap:.2rem;margin:.5rem 0 0;padding-left:1.25rem;font-size:.85rem;display:flex}.pokemon-page{flex-direction:column;gap:2rem;display:flex}.pokemon-artwork{object-fit:contain;flex-shrink:0;width:220px;height:220px}.pokemon-header{align-items:flex-start;gap:2rem;display:flex}@media (width<=560px){.pokemon-header{flex-direction:column;align-items:center}}.pokemon-info{flex-direction:column;gap:.75rem;padding-top:.5rem;display:flex}.pokemon-id{color:var(--color-text-muted);font-size:.95rem;font-weight:700}.pokemon-name{text-transform:capitalize;margin:0;font-size:2.25rem;font-weight:800;line-height:1}.pokemon-types{gap:.5rem;display:flex}.type-badge{color:#fff;text-transform:capitalize;letter-spacing:.03em;border-radius:999px;padding:.25rem .85rem;font-size:.8rem;font-weight:700}.favorite-btn{border:2px solid var(--color-accent);border-radius:var(--radius);color:var(--color-accent);cursor:pointer;background:#fff;align-self:flex-start;padding:.5rem 1rem;font-size:.9rem;font-weight:700;transition:background .15s,color .15s}.favorite-btn:hover{background:var(--color-accent);color:#fff}.favorite-btn.favorite-btn--active{background:var(--color-accent);color:#fff}.favorite-btn.favorite-btn--active:hover{color:var(--color-accent);background:#fff}.pokemon-meta{gap:1.5rem;margin-top:.25rem;display:flex}.pokemon-meta .meta-item{flex-direction:column;gap:.15rem;display:flex}.pokemon-meta .meta-item .meta-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.pokemon-meta .meta-item .meta-value{font-size:1rem;font-weight:700}.pokemon-section{flex-direction:column;gap:.75rem;display:flex}.pokemon-section h2{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin:0;font-size:1rem;font-weight:700}.stat-row{grid-template-columns:7rem 3rem 1fr;align-items:center;gap:.75rem;display:grid}.stat-row .stat-name{color:var(--color-text-muted);text-align:right;font-size:.85rem;font-weight:600}.stat-row .stat-value{text-align:right;font-size:.9rem;font-weight:700}.stat-row .stat-bar-track{background:#e5e7eb;border-radius:999px;height:8px;overflow:hidden}.stat-row .stat-bar-track .stat-bar-fill{background:var(--color-primary);border-radius:999px;height:100%;transition:width .4s}.abilities-list{flex-wrap:wrap;gap:.5rem;display:flex}.ability-badge{border:2px solid var(--color-primary);border-radius:var(--radius);text-transform:capitalize;background:#fff;padding:.35rem .85rem;font-size:.85rem;font-weight:600}.ability-badge.hidden{color:var(--color-text-muted);border-style:dashed}.about{max-width:680px}.about h1{margin-bottom:.5rem}.about-intro{color:var(--color-text-muted);margin-bottom:2rem}.about-list{flex-direction:column;gap:1.5rem;margin:0;padding:0;list-style:none;display:flex}.about-item a{color:var(--color-primary);font-size:1.1rem;font-weight:600;text-decoration:none}.about-item a:hover{text-decoration:underline}.about-item p{color:var(--color-text-muted);margin:.25rem 0 0;line-height:1.6}