:root{color:#fff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f172a;font-family:system-ui,Segoe UI,Roboto,sans-serif}body{background:radial-gradient(circle at 15% 20%,#334155,#0000 30%),radial-gradient(circle at 85% 80%,#1e3a5f,#0000 30%),#111827;min-width:320px;min-height:100vh;margin:0}#root{box-sizing:border-box;width:100%;min-height:100vh}.weather-app{box-sizing:border-box;width:100%;max-width:1000px;min-height:100vh;margin:auto;padding:45px 25px}.weather-header{text-align:center;margin-bottom:30px}.weather-header h2{color:#fff;margin:0;font-size:38px}.weather-header p{color:#cbd5e1;margin-top:8px;font-size:16px}@media (width<=600px){.weather-app{padding:30px 15px}.weather-header h2{font-size:30px}}.SearchBox{text-align:center;margin:25px 0 35px}.SearchBox form{justify-content:center;align-items:center;gap:12px;display:flex}.SearchBox .MuiTextField-root{width:300px}.SearchBox .MuiInputBase-root{color:#fff;background:#ffffff1a;border-radius:12px}.SearchBox .MuiInputLabel-root{color:#cbd5e1}.SearchBox .MuiInputLabel-root.Mui-focused{color:#fff}.SearchBox .MuiFilledInput-underline:before{border-bottom-color:#ffffff4d}.SearchBox .MuiFilledInput-underline:after{border-bottom-color:#60a5fa}.SearchBox button{text-transform:none;background:#2563eb;border-radius:12px;height:56px;padding:0 28px;font-size:16px}.SearchBox button:hover{background:#1d4ed8}@media (width<=600px){.SearchBox form{flex-direction:column}.SearchBox .MuiTextField-root,.SearchBox button{width:100%}}.InfoBox{width:100%;margin-top:35px}.weather-card{box-sizing:border-box;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff1f;border:1px solid #fff3;border-radius:24px;max-width:850px;margin:auto;padding:35px;box-shadow:0 20px 40px #0003}.weather-content{color:#fff}.weather-main{justify-content:space-between;align-items:center;gap:20px;display:flex}.weather-main h1{text-transform:capitalize;margin:0;font-size:42px}.weather-main p{color:#cbd5e1;text-transform:capitalize;margin:8px 0 0;font-size:17px}.temperature{color:#fff;font-size:55px;font-weight:700}.feels-like{color:#cbd5e1;margin:12px 0 30px}.weather-details{grid-template-columns:repeat(4,1fr);gap:15px;width:100%;display:grid}.detail-card{box-sizing:border-box;text-align:center;background:#ffffff1a;border:1px solid #ffffff26;border-radius:18px;padding:20px 10px;transition:all .2s}.detail-card:hover{background:#ffffff29;transform:translateY(-4px)}.detail-card span{font-size:24px}.detail-card p{color:#cbd5e1;margin:8px 0 5px;font-size:14px}.detail-card h3{color:#fff;margin:0;font-size:18px}@media (width<=700px){.weather-card{padding:25px 20px}.weather-main{flex-direction:column;align-items:flex-start}.temperature{font-size:42px}.weather-details{grid-template-columns:repeat(2,1fr)}}