@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&display=swap";:root{--bg:#f0f4ff;--bg2:#e4eaff;--surface:#fff;--surface2:#f7f9ff;--border:#6478ff26;--text:#1a1f3a;--text2:#5a6080;--accent:#5c6ef8;--accent2:#ff6b6b;--accent3:#ffd93d;--shadow:0 4px 24px #5c6ef81f;--shadow-lg:0 8px 40px #5c6ef82e;--radius:16px;--radius-sm:10px;--transition:.25s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg:#0d0f1a;--bg2:#13162a;--surface:#1a1f3a;--surface2:#222744;--border:#5c6ef833;--text:#e8ecff;--text2:#8890b8;--accent:#7b8fff;--accent2:#ff8080;--accent3:#ffd93d;--shadow:0 4px 24px #0006;--shadow-lg:0 8px 40px #00000080}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);min-height:100vh;transition:background-color var(--transition), color var(--transition);font-family:Nunito,sans-serif;line-height:1.6}.app{flex-direction:column;min-height:100vh;display:flex}.app__header{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);z-index:50;height:64px;transition:background var(--transition), border-color var(--transition);justify-content:space-between;align-items:center;padding:0 2rem;display:flex;position:sticky;top:0}.app__logo{align-items:center;gap:10px;display:flex}.app__title{color:var(--accent);letter-spacing:-.5px;font-family:Space Mono,monospace;font-size:1.4rem;font-weight:700}.app__title span{color:var(--accent2)}.app__header nav{align-items:center;gap:12px;display:flex}.app__header nav a{color:var(--text2);border-radius:var(--radius-sm);border:1.5px solid var(--border);transition:all var(--transition);background:var(--surface2);padding:6px 14px;font-size:.9rem;font-weight:700;text-decoration:none}.app__header nav a:hover{color:var(--accent);border-color:var(--accent);background:var(--bg2)}.theme-toggle{border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;transition:all var(--transition);align-items:center;gap:6px;padding:6px 14px;font-family:Nunito,sans-serif;font-size:.85rem;font-weight:700;display:flex}.theme-toggle:hover{color:var(--accent3);border-color:var(--accent3);background:var(--bg2);transform:none}.app__main{flex:1;align-items:flex-start;gap:1.5rem;width:100%;max-width:1400px;margin:0 auto;padding:2rem;display:flex}.app__left{flex-direction:column;flex:1;gap:1.25rem;min-width:0;display:flex}.app__right{width:340px;min-width:340px;position:sticky;top:80px}.app__search-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:background var(--transition), border-color var(--transition);padding:1.25rem 1.5rem}.search-bar{align-items:center;gap:12px;display:flex}input[type=text],input:not([type=checkbox]){border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);color:var(--text);transition:all var(--transition);outline:none;flex:1;width:100%;max-width:none;padding:10px 16px;font-family:Nunito,sans-serif;font-size:.95rem}input[type=text]:focus,input:not([type=checkbox]):focus{border-color:var(--accent);background:var(--surface);transform:none;box-shadow:0 0 0 3px #5c6ef81f}button{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);background:var(--accent);color:#fff;border:none;align-items:center;gap:6px;padding:10px 20px;font-family:Nunito,sans-serif;font-size:.9rem;font-weight:700;display:inline-flex}button:hover{opacity:.88;background:var(--accent);transform:translateY(-1px)}button:active{transform:translateY(0)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}.app__results-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-height:300px;box-shadow:var(--shadow);transition:background var(--transition), border-color var(--transition);padding:1.5rem}.card-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;display:grid}.card{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);padding:1.25rem 1rem 1rem;position:relative;overflow:hidden}.card:before{content:"";pointer-events:none;background:linear-gradient(135deg,#0000 60%,#5c6ef80a);position:absolute;inset:0}.card:hover{box-shadow:var(--shadow-lg);border-color:var(--accent);transform:translateY(-4px)}.card--selected{border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px #5c6ef826, var(--shadow)}.card__checkbox{cursor:pointer;width:18px;height:18px;accent-color:var(--accent);z-index:2;position:absolute;top:10px;left:10px}.card__image-wrapper{background:var(--bg2);border:2px solid var(--border);width:96px;height:96px;transition:border-color var(--transition);border-radius:50%;justify-content:center;align-items:center;margin:0 auto .5rem;display:flex}.card:hover .card__image-wrapper{border-color:var(--accent)}.card__image{object-fit:contain;width:80px;height:80px;image-rendering:pixelated}.card__id{color:var(--text2);margin-bottom:2px;font-family:Space Mono,monospace;font-size:.7rem}.card__name{color:var(--text);text-transform:capitalize;margin-bottom:6px;font-size:1rem;font-weight:800}.card__description{display:none}.card__types{flex-wrap:wrap;justify-content:center;gap:4px;margin-top:6px;display:flex}.type-badge{text-transform:capitalize;color:#fff;letter-spacing:.3px;border-radius:20px;padding:2px 8px;font-size:.68rem;font-weight:700}.type-badge--fire{background:#f97316}.type-badge--water{background:#3b82f6}.type-badge--grass{background:#22c55e}.type-badge--electric{color:#1a1a1a;background:#eab308}.type-badge--ice{color:#1a1a1a;background:#67e8f9}.type-badge--fighting{background:#ef4444}.type-badge--poison{background:#a855f7}.type-badge--ground{background:#d97706}.type-badge--flying{background:#818cf8}.type-badge--psychic{background:#ec4899}.type-badge--bug{color:#1a1a1a;background:#84cc16}.type-badge--rock{background:#78716c}.type-badge--ghost{background:#6366f1}.type-badge--dragon{background:#7c3aed}.type-badge--dark{background:#374151}.type-badge--steel{background:#6b7280}.type-badge--fairy{color:#1a1a1a;background:#f9a8d4}.type-badge--normal{color:#1a1a1a;background:#9ca3af}.pagination{justify-content:center;align-items:center;gap:12px;padding:1rem 0;display:flex}.pagination span{color:var(--text2);text-align:center;min-width:60px;font-family:Space Mono,monospace;font-size:.85rem}.pagination button{background:var(--surface);color:var(--accent);border:1.5px solid var(--border);padding:8px 16px;font-size:.85rem}.pagination button:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}.detail-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);text-align:center;transition:background var(--transition);padding:1.5rem}.detail-panel__close{width:100%;color:var(--text2);border:1.5px solid var(--border);background:0 0;justify-content:center;align-items:center;gap:6px;margin-bottom:1.25rem;padding:8px 14px;font-size:.85rem;display:flex}.detail-panel__close:hover{background:var(--accent2);color:#fff;border-color:var(--accent2)}.detail-panel img{object-fit:contain;width:140px;height:140px;image-rendering:pixelated;background:var(--bg2);border:2px solid var(--border);border-radius:50%;padding:8px}.detail-panel h2{text-transform:capitalize;color:var(--text);margin:1rem 0 .5rem;font-size:1.3rem;font-weight:800}.detail-panel p{color:var(--text2);margin-bottom:4px;font-size:.9rem}.flyout{background:var(--surface);border-top:1.5px solid var(--accent);z-index:100;transition:background var(--transition);align-items:center;gap:12px;padding:14px 2rem;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 30px #5c6ef826}.flyout__count{color:var(--accent);margin-right:auto;font-family:Space Mono,monospace;font-size:.95rem;font-weight:800}.flyout__btn{border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);border:1.5px solid var(--border);padding:8px 18px;font-size:.85rem}.flyout__btn:hover{background:var(--bg2);border-color:var(--accent);color:var(--accent)}.flyout__btn--download{background:var(--accent);color:#fff;border-color:var(--accent)}.flyout__btn--download:hover{opacity:.85;color:#fff;background:var(--accent)}.spinner{justify-content:center;align-items:center;padding:3rem;display:flex}.spinner:after{content:"";border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.results-error,.results-empty{color:var(--text2);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:3rem;display:flex}.error-icon{font-size:2.5rem}.error-message{color:var(--accent2);font-weight:600}.app__error-trigger{justify-content:center;padding:1rem 2rem 2rem;display:flex}.about-page{background:var(--bg);justify-content:center;align-items:center;min-height:calc(100vh - 64px);padding:2rem;display:flex}.about-card{background:var(--surface);border:1px solid var(--border);text-align:center;width:100%;max-width:480px;box-shadow:var(--shadow-lg);border-radius:24px;padding:3rem 2.5rem}.about-icon{margin-bottom:1rem;font-size:3.5rem}.about-title{color:var(--text);margin-bottom:.5rem;font-size:1.8rem;font-weight:900}.about-author{color:var(--accent);margin-bottom:.5rem;font-weight:700}.about-desc{color:var(--text2);margin-bottom:2rem;font-size:.95rem}.about-link{background:var(--accent);color:#fff;border-radius:var(--radius-sm);transition:opacity var(--transition);margin-bottom:1rem;padding:10px 24px;font-weight:700;text-decoration:none;display:inline-block}.about-link:hover{opacity:.85}.about-btn{background:var(--surface2);color:var(--text2);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);margin:.5rem auto 0;padding:10px 24px;font-weight:700;display:block}.about-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--bg2)}.not-found-page{text-align:center;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:calc(100vh - 64px);padding:2rem;display:flex}.not-found-page h1{color:var(--accent);font-family:Space Mono,monospace;font-size:5rem;line-height:1}.not-found-page p{color:var(--text2);font-size:1.1rem}.app__main--split .app__left{flex:1}@media (width<=768px){.app__main{flex-direction:column;padding:1rem}.app__right{width:100%;min-width:0;position:static}.app__title{font-size:1.1rem}.card-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}