*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}body{min-height:100vh;background:linear-gradient(180deg,#b8c0c8,#5d6d7e);display:flex;justify-content:center;align-items:center;color:#fff}.app{width:100%;display:flex;justify-content:center;align-items:center}.weather-card{width:100%;max-width:480px;background:#ffffff38;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;padding:36px 30px;text-align:center;box-shadow:0 30px 60px #00000059;animation:fadeIn .8s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.title{font-size:2.1rem;font-weight:600}.subtitle{margin-bottom:20px;opacity:.9}.search{display:flex;gap:12px;margin-bottom:12px}.search input{flex:1;padding:14px;border-radius:14px;border:none}.search button,.geo-btn,.unit-btn{padding:12px 16px;border-radius:14px;border:none;cursor:pointer;font-weight:600}.geo-btn{margin-bottom:16px;width:100%}.weather-main{display:flex;justify-content:center;align-items:center;gap:14px}.weather-main img{width:70px;animation:iconPop .6s ease}@keyframes iconPop{0%{transform:scale(.6) rotate(-10deg);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}#temperature{font-size:3.2rem;font-weight:600}#description{margin:14px 0 20px;text-transform:capitalize}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}.details div{background:#ffffff40;border-radius:16px;padding:14px;transition:transform .3s ease}.details div:hover{transform:translateY(-6px) scale(1.05)}.hourly-container{overflow:hidden;margin:16px 0}.hourly-carousel{display:flex;gap:14px;width:max-content;animation:scroll 26s linear infinite}.hour{min-width:70px;background:#ffffff40;border-radius:16px;padding:10px;transition:transform .3s ease}.hour:hover{transform:scale(1.1)}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.chart-container{background:#00000040;border-radius:18px;padding:16px;margin:22px 0}.forecast{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.forecast div{width:70px;background:#ffffff40;border-radius:16px;padding:12px 8px;position:relative;transition:transform .3s ease}.forecast div:hover{transform:translateY(-6px) scale(1.08)}.tooltip{position:absolute;bottom:120%;left:50%;transform:translate(-50%);background:#141414f2;padding:10px 12px;border-radius:12px;font-size:.8rem;opacity:0;transition:.25s ease;pointer-events:none}.forecast div:hover .tooltip{opacity:1}.hidden{display:none}@media(max-width:420px){.details{grid-template-columns:1fr}}