.card{background:var(--surface);border-radius:12px;padding:1.2rem 1rem;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:.4rem;animation:fadeInUp .4s ease both}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.card img{width:96px;height:96px;image-rendering:pixelated}.card h2{font-size:.9rem;font-weight:600;text-transform:capitalize;color:var(--text-primary)}.card p{font-size:.72rem;color:var(--text-secondary);text-transform:capitalize}.card[data-type=fire]{border-top:3px solid #ff6b35}.card[data-type=water]{border-top:3px solid #4fc3f7}.card[data-type=grass]{border-top:3px solid #66bb6a}.card[data-type=electric]{border-top:3px solid #ffd54f}.card[data-type=psychic]{border-top:3px solid #f48fb1}.card[data-type=ice]{border-top:3px solid #80deea}.card[data-type=dragon]{border-top:3px solid #7986cb}.card[data-type=dark]{border-top:3px solid #616161}.card[data-type=fighting]{border-top:3px solid #ef5350}.card[data-type=poison]{border-top:3px solid #ab47bc}.card[data-type=ground]{border-top:3px solid #ffa726}.card[data-type=rock]{border-top:3px solid #8d6e63}.card[data-type=bug]{border-top:3px solid #9ccc65}.card[data-type=ghost]{border-top:3px solid #5c6bc0}.card[data-type=normal]{border-top:3px solid #bdbdbd}.card[data-type=steel]{border-top:3px solid #90a4ae}.card[data-type=fairy]{border-top:3px solid #f48fb1}.card.hidden{animation:fadeOut .2s ease both;pointer-events:none}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{to{opacity:0;transform:translateY(10px)}}.card-info{display:flex;flex-direction:column;align-items:center;gap:.3rem}.card-number{font-size:.7rem;color:var(--text-secondary);font-weight:500}.types{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center}.type-fire{background:#ff6b35}.type-water{background:#4fc3f7}.type-grass{background:#66bb6a}.type-electric{background:#ffd54f;color:#333}.type-psychic{background:#f48fb1}.type-ice{background:#80deea;color:#333}.type-dragon{background:#7986cb}.type-dark{background:#616161}.type-fighting{background:#ef5350}.type-poison{background:#ab47bc}.type-ground{background:#ffa726;color:#333}.type-rock{background:#8d6e63}.type-bug{background:#9ccc65;color:#333}.type-ghost{background:#5c6bc0}.type-normal{background:#bdbdbd;color:#333}.type-steel{background:#90a4ae;color:#333}.type-fairy{background:#f48fb1}.type-flying{background:#90caf9;color:#333}.modal{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background:var(--surface);border-radius:12px;padding:2rem;max-width:420px;width:90%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 24px 48px #0003;animation:modalIn .25s ease both}#close-modal{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-secondary);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}#close-modal:hover{background:var(--border)}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.search-container{display:flex;justify-content:center;padding:1.5rem 2rem;background:var(--bg)}.search-container input{width:100%;max-width:500px;padding:.75rem 1.2rem;border:1px solid var(--border);border-radius:24px;font-size:.95rem;outline:none;background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow);transition:box-shadow .2s,border-color .2s}.search-container input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #1a73e826}.filters{display:flex;flex-wrap:wrap;gap:.4rem;padding:1rem 2rem;max-width:1400px;margin:0 auto}.filter-btn{padding:.35rem .9rem;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:.75rem;font-weight:500;text-transform:capitalize;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif}.filter-btn:hover{border-color:var(--accent);color:var(--accent)}.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}:root{--bg: #f8f9fa;--surface: #ffffff;--text-primary: #202124;--text-secondary: #5f6368;--border: #e0e0e0;--header-bg: #ffffff;--shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);--shadow-hover: 0 4px 12px rgba(0,0,0,.15);--accent: #1a73e8}:root.dark{--bg: #202124;--surface: #2d2e30;--text-primary: #e8eaed;--text-secondary: #9aa0a6;--border: #3c4043;--header-bg: #2d2e30;--shadow: 0 1px 3px rgba(0,0,0,.4);--shadow-hover: 0 4px 12px rgba(0,0,0,.5);--accent: #8ab4f8}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text-primary);min-height:100vh}header{background:var(--header-bg);border-bottom:1px solid var(--border);padding:0 2rem;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;box-shadow:var(--shadow)}header h1{font-size:1.3rem;font-weight:600;color:var(--accent);letter-spacing:-.5px}#dark-toggle{background:none;border:1px solid var(--border);border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1.1rem;color:var(--text-primary);display:flex;align-items:center;justify-content:center;transition:background .2s}#dark-toggle:hover{background:var(--border)}main{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;padding:2rem;max-width:1400px;margin:0 auto}.switch{position:relative;display:inline-block;width:51px;height:31px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#e5e5ea;border-radius:31px;transition:.3s}.slider:before{content:"";position:absolute;width:27px;height:27px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 2px 4px #0000004d}.switch input:checked+.slider{background:#34c759}.switch input:checked+.slider:before{transform:translate(20px)}.toggle-container{display:flex;align-items:center;gap:.5rem;font-size:1.1rem}.modal-number{font-size:.8rem;color:var(--text-secondary);font-weight:500}.modal-name{font-size:1.5rem;font-weight:700;text-transform:capitalize;color:var(--text-primary);margin:.2rem 0}.modal-types{display:flex;gap:.4rem;justify-content:center;margin:.5rem 0}.modal-meta{display:flex;gap:2rem;justify-content:center;margin:1rem 0;padding:1rem;background:var(--bg);border-radius:12px}.meta-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}.meta-label{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.meta-value{font-size:1rem;font-weight:600;color:var(--text-primary)}.modal-section{text-align:left;margin-top:1.2rem;width:100%}.modal-section h3{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:.6rem}.abilities{display:flex;gap:.4rem;flex-wrap:wrap}.ability{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:.3rem .8rem;font-size:.8rem;text-transform:capitalize;color:var(--text-primary)}.stat-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}.stat-name{font-size:.75rem;text-transform:capitalize;color:var(--text-secondary);width:100px;flex-shrink:0}.stat-value{font-size:.85rem;font-weight:600;color:var(--text-primary);width:30px;flex-shrink:0}.stat-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.stat-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .6s ease}.moves{display:flex;flex-wrap:wrap;gap:.4rem}.move{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:.25rem .7rem;font-size:.72rem;text-transform:capitalize;color:var(--text-secondary)}.type{font-size:.65rem;font-weight:600;text-transform:uppercase;padding:.2rem .5rem;border-radius:20px;color:#fff;letter-spacing:.5px}