@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap);:root{--primary-color:#2d3436;--secondary-color:#0984e3;--background-gradient:linear-gradient(135deg,#f5f7fa,#c3cfe2);--card-bg:hsla(0,0%,100%,.9);--text-color:#2d3436;--box-shadow:0 8px 32px rgba(0,0,0,.1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--background-gradient);color:var(--text-color);font-family:Poppins,sans-serif;min-height:100vh;padding:2rem;transition:background .5s ease}body.clear{background:linear-gradient(135deg,#ffd89b,#19547b)}body.clouds{background:linear-gradient(135deg,#d3d3d3,#696969)}body.rain{background:linear-gradient(135deg,#63afdf,#363795)}body.thunderstorm{background:linear-gradient(135deg,#0f0c29,#302b63)}body.snow{background:linear-gradient(135deg,#e6dada,#274046)}body.mist{background:linear-gradient(135deg,#a8c0ff,#3f2b96)}body.haze{background:linear-gradient(135deg,hsla(0,0%,83%,.965),#696969)}body.fog{background:linear-gradient(135deg,#3e5561,#3a7bd5)}body.default{background:var(--background-gradient)}.container{margin:0 auto;max-width:800px}.header{margin-bottom:2rem;text-align:center}.header .title{color:var(--primary-color);font-size:2.5rem;letter-spacing:-1px;margin-bottom:1rem}.search-form{display:flex;gap:1rem;margin:0 auto;max-width:500px}@media(max-width:576px){.search-form{align-items:stretch;flex-direction:column;gap:.5rem}}.search-form .search-input{background:var(--card-bg);border:none;border-radius:8px;box-shadow:var(--box-shadow);flex:1;font-size:1rem;padding:.8rem 1.2rem}.search-form .search-btn{background:var(--secondary-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:500;overflow:hidden;padding:.8rem 2rem;position:relative;transition:transform .2s,background .2s}.search-form .search-btn:hover{background:#0876ca;transform:translateY(-2px)}.search-form .search-btn .loading-dots{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.weather-card{backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.603);display:none;margin:2rem auto;max-width:800px;min-height:400px;padding:2rem}@media(max-width:768px){.weather-card{margin:1rem;min-height:auto}}.weather-card.show{animation:fadeIn .5s ease;display:block}.weather-info{display:grid;gap:2rem;grid-template-columns:1fr 1fr}@media(max-width:768px){.weather-info{grid-template-columns:1fr}}.weather-info .location{margin-bottom:1.5rem}.weather-info .location .city{font-size:2rem;margin-bottom:.5rem}.weather-info .location .country{color:#666;font-size:1.2rem}.weather-info .temperature{align-items:center;display:flex;gap:1rem;justify-content:flex-start}@media(max-width:768px){.weather-info .temperature{justify-content:center}}.weather-info .temperature .weather-icon{height:80px;width:80px}.weather-info .temperature .temp-value{font-size:3rem;font-weight:600}.weather-info .temperature .temp-unit{color:#666;font-size:1.5rem}.weather-info .description{font-size:1.2rem;margin-bottom:2rem;text-align:left;text-transform:capitalize}@media(max-width:768px){.weather-info .description{text-align:center}}.weather-info .details{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}@media(max-width:768px){.weather-info .details{grid-template-columns:1fr}}.weather-info .details .detail-item{background:hsla(0,0%,100%,.6);border-radius:8px;padding:1rem;text-align:center}.weather-info .details .detail-item .detail-label{color:#666;display:block;font-size:.9rem;margin-bottom:.5rem}.weather-info .details .detail-item span:not(.detail-label){font-size:1.2rem;font-weight:500}.error-message{color:#e74c3c;display:none;padding:1rem;text-align:center}.loading .btn-text{visibility:hidden}.loading .loading-dots{display:block!important}.loading .loading-dots:after{animation:dots 1s steps(5) infinite;content:"."}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%{content:"..."}80%,to{content:""}}.unit-toggle{background:hsla(0,0%,100%,.8);border-radius:20px;display:flex;margin-left:10px;padding:2px}.unit-toggle .unit-btn{background:none;border:none;border-radius:15px;color:var(--text-color);cursor:pointer;font-size:1rem;padding:5px 10px;transition:all .3s ease}.unit-toggle .unit-btn.active{background:var(--secondary-color);color:#fff}.unit-toggle .unit-btn:hover{opacity:.8}