:root{--background:#ffffff;--foreground:#171717}body,html{max-width:100vw;overflow-x:hidden}body{color:var(--foreground);background:radial-gradient(#e0eafc,#cfdef3,#f2f2f2);font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,body{margin:0;padding:0}*{box-sizing:border-box}a{color:inherit;text-decoration:none}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.pokemon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:16px;gap:16px;padding:16px}.pokemon-card{background-color:#fff;border-radius:10px;overflow:hidden;cursor:pointer;animation:fadeIn .5s ease-in-out}.pokemon-card,.pokemon-card:hover{transition:transform .3s ease-in-out,box-shadow .3s ease-in-out}.pokemon-card:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.2)}.pokemon-card img{height:100px;object-fit:contain;margin:0 auto;display:block}.pokemon-card-content{text-align:center;padding:8px}.pokemon-card-content .id{color:#888;font-size:12px}.pokemon-card-content .name{font-size:14px;text-transform:capitalize;margin-top:4px}.modal-title{font-size:24px;margin-bottom:16px}.modal-stats .stat-name{margin-bottom:4px}.search-container{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:16px;background-color:#fafafa;border:1px solid #ddd;border-radius:8px;margin-bottom:24px}.search-input{min-width:250px;padding:8px 12px;border:1px solid #ccc;border-radius:5px;font-size:14px;transition:border-color .3s ease}.search-input:focus{border-color:#007bff;outline:none}.type-filter{min-width:300px}.view-toggle-button{background-color:#007bff;color:white;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.view-toggle-button:hover{background-color:#0056b3}.pokemon-list{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.button-icon{display:flex;align-items:center;gap:5px}.modal-content:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;filter:blur(5px);z-index:-1}.modal-close{position:absolute;top:8px;right:12px;background:transparent;border:none;font-size:1.8rem;font-weight:700;color:#333;cursor:pointer;transition:color .2s ease;line-height:1}.modal-close:hover{color:#f44336}.modal-close:focus{outline:none}.modal-body{gap:12px}.modal-body img{width:100px;animation:bounceIn .5s ease}.modal-stats{margin-top:16px}.modal-stats .stat{margin-bottom:8px;gap:8px}.modal-stats .stat-name{text-transform:capitalize;font-size:14px;width:100px}.modal-stats .stat-bar{flex:1 1;height:10px;border-radius:5px;background-color:#e0e0e0;overflow:hidden}.modal-stats .stat-bar-fill{height:100%;transition:width .5s ease}.modal-stats .stat-value{font-size:12px;margin-left:8px}.type-normal{background:linear-gradient(180deg,#a8a878,#8a8a59)}.type-fire{background:linear-gradient(180deg,#f08030,#c03028)}.type-water{background:linear-gradient(180deg,#6890f0,#386ceb)}.type-electric{background:linear-gradient(180deg,#f8d030,#f0c108)}.type-grass{background:linear-gradient(180deg,#78c850,#588a30)}.type-ice{background:linear-gradient(180deg,#98d8d8,#78c8c8)}.type-fighting{background:linear-gradient(180deg,#c03028,#903028)}.type-poison{background:linear-gradient(180deg,#a040a0,#803080)}.type-ground{background:linear-gradient(180deg,#e0c068,#c09050)}.type-flying{background:linear-gradient(180deg,#a890f0,#8870d0)}.type-psychic{background:linear-gradient(180deg,#f85888,#d03868)}.type-bug{background:linear-gradient(180deg,#a8b820,#889020)}.type-rock{background:linear-gradient(180deg,#b8a038,#988038)}.type-ghost{background:linear-gradient(180deg,#705898,#504878)}.type-dragon{background:linear-gradient(180deg,#7038f8,#5018d8)}.type-dark{background:linear-gradient(180deg,#705848,#504038)}.type-steel{background:linear-gradient(180deg,#b8b8d0,#9898b0)}.type-fairy{background:linear-gradient(180deg,#ee99ac,#cc798c)}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1);opacity:1}to{transform:scale(1)}}.modal-content{background:radial-gradient(circle,#fdfdfd,#e0e0e0);border-radius:16px;padding:24px;animation:slideIn .4s ease;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.3);overflow:hidden}.modal-title{text-align:center;font-size:28px;font-weight:700;color:#333;text-transform:capitalize;margin-bottom:20px;animation:fadeIn .6s ease}.modal-body{display:flex;flex-direction:column;align-items:center;gap:20px}.modal-body img{width:120px;filter:drop-shadow(2px 4px 6px rgba(0,0,0,.4));animation:float 2s ease-in-out infinite}.modal-body .type-badge{padding:4px 12px;border-radius:20px;background-color:rgba(255,255,255,.2);color:#fff;font-size:12px;text-transform:uppercase;font-weight:700;margin:0 5px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);transition:transform .3s ease}.modal-body .type-badge:hover{transform:scale(1.1)}.modal-stats{width:100%;margin-top:10px;padding:12px 0}.modal-stats .stat{display:flex;align-items:center;gap:12px;margin-bottom:12px}.stat-name{text-transform:capitalize;font-size:14px;width:120px;color:#444}.stat-bar{flex:1 1;height:12px;border-radius:6px;background-color:#eee;position:relative;overflow:hidden}.stat-bar-fill{height:100%;border-radius:6px;animation:growBar 1s ease forwards}.stat-value{font-size:12px;width:32px;text-align:right;color:#555}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes growBar{0%{width:0}to{width:var(--bar-width)}}