@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--primary-color: #6C5DD3;--secondary-color: #8B80F9;--text-color: #ffffff;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37)}*{margin:0;padding:0;box-sizing:border-box;font-family:Outfit,sans-serif}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-gradient);color:var(--text-color);background-attachment:fixed}#root{width:100%;display:flex;justify-content:center;padding:20px}.container{width:100%;max-width:420px;background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--glass-shadow);overflow:hidden;transition:transform .3s ease;animation:fadeIn .8s ease-out}.search-section{display:flex;align-items:center;gap:12px;padding:25px}.search-section .search-form{flex:1;height:50px;position:relative}.search-section .search-form span{position:absolute;top:50%;left:18px;transform:translateY(-50%);color:#ffffffb3;font-size:1.2rem;transition:color .3s}.search-section .search-input{width:100%;height:100%;padding:0 20px 0 50px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:12px;outline:none;color:#fff;font-size:1rem;transition:all .3s ease}.search-section .search-input:focus{background:#ffffff26;border-color:#fff6;box-shadow:0 0 15px #ffffff1a}.search-section .search-input::placeholder{color:#ffffff80;transition:color .3s}.search-section .search-input:focus::placeholder{color:#fffc}.search-section .search-input:focus~span{color:#fff}.search-section .search-input::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:16px;width:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");background-size:contain;cursor:pointer;opacity:.7}.search-section .search-input::-webkit-search-cancel-button:hover{opacity:1}.search-section .location-button{width:50px;height:50px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff14;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.search-section .location-button:hover{background:#fff3;transform:translateY(-2px)}.weather-section{padding-bottom:20px}.current-weather{display:flex;flex-direction:column;align-items:center;padding:10px 0 40px;text-align:center;animation:slideUp .6s ease-out .2s backwards}.current-weather .weather-icon{width:160px;aspect-ratio:1;filter:drop-shadow(0 10px 20px rgba(0,0,0,.2));animation:float 6s ease-in-out infinite}.current-weather .temperature{font-size:5rem;font-weight:600;margin:10px 0;display:flex;text-shadow:0 5px 15px rgba(0,0,0,.2)}.current-weather .temperature span{font-size:2.5rem;font-weight:400;margin-top:15px;opacity:.8}.current-weather .description{font-size:1.4rem;font-weight:500;text-transform:capitalize;background:#ffffff26;padding:8px 16px;border-radius:20px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.hourly-forecast{padding:20px 25px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .8s ease-out .4s backwards}.hourly-forecast .weather-list{display:flex;gap:20px;overflow-x:auto;list-style:none;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.weather-list::-webkit-scrollbar{height:6px}.weather-list::-webkit-scrollbar-track{background:transparent}.weather-list::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:10px}.hourly-forecast .weather-item{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:70px;padding:15px 10px;border-radius:16px;background:#ffffff0d;transition:all .3s ease;border:1px solid transparent}.hourly-forecast .weather-item:hover{background:#ffffff26;border-color:#fff3;transform:translateY(-5px)}.hourly-forecast .weather-item .time{font-size:.9rem;font-weight:500;opacity:.8}.hourly-forecast .weather-item .weather-icon{width:40px;aspect-ratio:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.hourly-forecast .weather-item .temperature{font-size:1.1rem;font-weight:600}.no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:480px;padding:40px;animation:fadeIn .6s ease-out}.no-results .icon{width:120px;opacity:.8;margin-bottom:20px;animation:pulse 2s infinite}.no-results .title{font-size:1.8rem;margin-bottom:10px}.no-results .message{font-size:1rem;opacity:.8;line-height:1.6}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:.8}}@media (max-width: 624px){#root{padding:20px 10px 10px;align-items:flex-start}.container{max-width:100%;border-radius:16px;min-height:auto}.search-section{padding:15px}.current-weather .temperature{font-size:4rem}.current-weather .weather-icon{width:120px}.weather-section{padding-bottom:20px}.hourly-forecast{padding:15px}.hourly-forecast .weather-item{min-width:60px;padding:10px 5px}}@media (max-width: 380px){.current-weather .temperature{font-size:3.5rem}.current-weather .weather-icon{width:100px}}