body{color:#f5f5f5;background:linear-gradient(135deg,#0f2027,#2c5364,#00c9a7);justify-content:center;align-items:flex-start;min-height:100vh;margin:0;font-family:Inter,Segoe UI,sans-serif;display:flex}.container{text-align:center;width:100%;max-width:1000px;padding:40px 20px}h1{margin-bottom:20px;font-weight:600}.search-box{justify-content:center;margin-bottom:30px;display:flex}.search-box input{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff26;border:none;border-radius:12px 0 0 12px;outline:none;width:60%;padding:12px;font-size:16px}.search-box input::placeholder{color:#ddd}.search-box button{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff40;border:none;border-radius:0 12px 12px 0;padding:12px 20px;font-size:16px;transition:all .3s}.search-box button:hover{background:#ffffff59}.weather-card{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff26;border-radius:16px;margin:20px auto;padding:25px;box-shadow:0 6px 15px #00000040}.main-temp{color:#00c9a7;text-shadow:0 0 12px #00c9a799;margin-left:12px;font-size:64px;font-weight:800;display:inline-block}.forecast-container{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin-top:30px;display:grid}.forecast-card{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border-radius:12px;padding:15px;box-shadow:0 4px 10px #00000040}.forecast-card p{margin:5px 0}.chart-container{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff26;border-radius:16px;margin-top:40px;padding:20px;box-shadow:0 6px 15px #00000040}.loading{flex-direction:column;align-items:center;margin-top:15px;display:flex}.spinner{border:4px solid #ffffff4d;border-top-color:#00c9a7;border-radius:50%;width:32px;height:32px;margin-bottom:8px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:600px){.container{padding:20px 10px}h1{font-size:22px}.search-box{flex-direction:column;align-items:center}.search-box input{border-radius:12px;width:100%;margin-bottom:10px;font-size:14px}.search-box button{border-radius:12px;width:100%;font-size:14px}.weather-card{width:100%;padding:20px}.main-temp{font-size:48px}.forecast-container{grid-template-columns:1fr;gap:15px}.forecast-card{width:100%;padding:12px}.chart-container{margin-top:25px;padding:15px}canvas{max-width:100%!important;height:auto!important}}