body,html{margin:0;padding:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f7fafd;color:#222}.weather-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem 1rem;background:#f7fafd}.weather-title{font-size:2.3rem;font-weight:700;color:#2a4365;margin-bottom:2rem;letter-spacing:.5px}.weather-form{display:flex;gap:.5rem;background:#fff;border-radius:14px;box-shadow:0 2px 12px #2c3e5012;padding:1.2rem 1.5rem;margin-bottom:1.5rem;width:100%;max-width:400px}.weather-input .MuiOutlinedInput-root{background:#f3f6fa;border-radius:8px;font-size:1rem}.weather-search-btn{background:#2a4365!important;color:#fff!important;border-radius:8px!important;font-weight:600!important;padding:.7rem 1.5rem!important;box-shadow:0 2px 8px #2c3e5014!important;transition:background .2s,box-shadow .2s}.weather-search-btn:hover{background:#1a365d!important;box-shadow:0 4px 16px #2c3e5021!important}.weather-search-btn:disabled{background:#2a436580!important;color:#edf2f7!important;pointer-events:none;box-shadow:none!important}.weather-card{background:#fff!important;border-radius:18px!important;box-shadow:0 4px 24px #2c3e5017!important;width:100%;max-width:400px!important;margin-top:2rem;transition:box-shadow .2s}.weather-card:hover{box-shadow:0 8px 32px #2c3e5021!important}.weather-card-content{padding:1.5rem 2rem!important}.weather-icon,.weather-icon .MuiCardMedia-root{object-fit:cover;background:#f3f6fa;border-radius:12px 12px 0 0;height:216px;width:100%;padding-bottom:.5rem}.weather-city{margin:0;color:#2a4365;font-size:1.75rem;font-weight:700;text-align:center;display:flex;justify-content:center}.weather-description{display:block;margin:.7rem auto 1rem;font-size:1.05rem;color:#3182ce;font-weight:500;text-transform:capitalize;background:#e6f0fa;padding:.4em 1.2em;border-radius:1em;width:fit-content;letter-spacing:.2px}.weather-details{margin-top:1.2rem}.weather-details h2{margin:.5em 0;font-size:1.08rem;color:#2a4365;font-weight:600;background:#f3f6fa;border-radius:8px;padding:.7em 1em;letter-spacing:.1px}h3[style*="color: red"]{color:#e53e3e!important;background:#fff5f5;border-radius:8px;padding:1em 1.5em;margin-top:2rem;font-size:1.1rem;font-weight:500;text-align:center}@media (max-width: 600px){.weather-title{font-size:1.8rem}.weather-form{padding:.8rem;max-width:94%}.weather-card-content{padding:1rem!important}}