.app.default{color:#111;background:linear-gradient(#87ceeb,#cfefff)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}.app{flex-direction:column;align-items:center;width:100%;min-height:100vh;padding:5vh 16px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;transition:all .4s;display:flex;overflow-x:hidden}.app.light{color:#111;background:linear-gradient(#87ceeb,#cfefff)}.app.dark{color:#fff;background:linear-gradient(#0f2027,#203a43,#2c5364)}.app.sunny{background:linear-gradient(#fbbf24,#fde68a)}.app.cloudy{background:linear-gradient(#94a3b8,#cbd5f5)}.app.rainy{background:linear-gradient(#334155,#1e293b)}.glass{-webkit-backdrop-filter:blur(14px);background:#ffffff40;border:1px solid #ffffff4d;border-radius:14px;transition:all .3s}.header{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:10px 16px;display:flex}.theme-btn{cursor:pointer;color:#fff;background:#0006;border:none;border-radius:6px;padding:6px 12px;font-size:clamp(10px,1.5vw,12px);transition:all .2s}.theme-btn:hover{background:#0009;transform:scale(1.05)}.search{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:400px;margin-top:20px;padding:10px;display:flex}.search:hover{transform:translateY(-4px)scale(1.02);box-shadow:0 10px 25px #0003}.search input{border:none;border-radius:6px;outline:none;flex:1;min-width:120px;padding:10px}.search button{cursor:pointer;border:none;border-radius:6px;padding:10px 12px;transition:all .2s}.search button:hover{background:#00000026;transform:scale(1.1)}.card{text-align:center;width:90%;max-width:280px;margin-top:30px;padding:24px}.card:hover{transform:translateY(-4px)scale(1.02);box-shadow:0 10px 25px #0003}.temp{font-size:clamp(32px,6vw,42px);font-weight:600}.desc{opacity:.8;font-size:clamp(12px,2vw,14px)}.temp-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.unit-toggle{cursor:pointer;background:#fff3;border:1px solid #fff6;border-radius:30px;align-items:center;width:clamp(90px,20vw,110px);height:clamp(34px,6vw,42px);font-size:clamp(12px,2vw,16px);transition:all .25s;display:flex;position:relative;overflow:hidden}.unit-toggle.fahrenheit:before{transform:translate(100%)}.unit-toggle:before{content:"";background:#ffffff80;border-radius:30px;width:50%;height:100%;transition:transform .3s;position:absolute}.unit-toggle span{text-align:center;z-index:1;width:50%;font-weight:600}.unit-toggle:hover{transform:scale(1.05);box-shadow:0 6px 16px #00000040}.sky{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.sun{width:clamp(50px,10vw,90px);animation:6s ease-in-out infinite alternate float;position:absolute;top:5vh;right:5vw}.cloud{animation:linear infinite moveCloud;position:absolute}.cloud1{opacity:.4;width:clamp(60px,10vw,100px);animation-duration:100s;top:20%}.cloud2{opacity:.9;width:clamp(100px,18vw,180px);animation-duration:50s;top:55%}@keyframes moveCloud{0%{transform:translate(-20%)}to{transform:translate(120vw)}}@keyframes float{0%{transform:translateY(0)}to{transform:translateY(12px)}}.footer{justify-content:center;width:100%;margin-top:auto;padding-bottom:10px;display:flex}.time-box{-webkit-backdrop-filter:blur(14px);text-align:center;color:#333;background:#ffffff40;border:1px solid #ffffff4d;border-radius:14px;padding:12px 18px;font-size:clamp(12px,2vw,14px);transition:all .3s}.app.dark .time-box,.app.rainy .time-box{color:#fff}.time-box:hover{transform:translateY(-4px)scale(1.03);box-shadow:0 10px 25px #00000040}.hour{margin-top:4px;font-size:clamp(14px,3vw,18px);font-weight:500}.status{text-align:center;margin-top:20px;font-size:clamp(14px,2.5vw,16px);font-weight:600;animation:.3s fadeIn}.error{color:#ff4d4d;text-align:center;margin-top:20px;font-size:clamp(14px,2.5vw,16px);font-weight:600;animation:.3s fadeIn}.card img{width:clamp(70px,15vw,100px);margin:10px 0;animation:.4s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.spinner{border:5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:50px;height:50px;margin-top:30px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}