.form-container{max-width:1200px;margin:auto;padding:20px;font-family:Arial,sans-serif}.weather-form{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;max-width:600px;margin-left:auto;margin-right:auto}.weather-form input,.weather-form button{padding:12px;font-size:16px;border:1px solid #ddd;border-radius:5px}.weather-form input:focus{outline:none;border-color:#007bff;box-shadow:0 0 5px #007bff4d}.weather-form button{background-color:#007bff;color:#fff;border:none;cursor:pointer;transition:background-color .3s}.weather-form button:hover:not(:disabled){background-color:#0056b3}.weather-form button:disabled{background-color:#6c757d;cursor:not-allowed}.message{font-style:italic;margin-bottom:15px;text-align:center;padding:10px;border-radius:5px}.message:not(:empty){background-color:#f8f9fa;border:1px solid #dee2e6}.weather-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;margin-top:20px}.weather-card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#f9f9f9;box-shadow:0 2px 4px #0000001a;transition:transform .2s,box-shadow .2s}.weather-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.weather-card h3{margin-top:0;color:#007bff;border-bottom:2px solid #007bff;padding-bottom:5px}.weather-card h4{color:#28a745;margin-top:15px;margin-bottom:10px}.weather-card p{margin:5px 0;line-height:1.4}.weather-card pre{white-space:pre-wrap;word-wrap:break-word;font-size:11px;margin-top:10px}.weather-card form{display:flex;flex-direction:column;gap:10px}.weather-card form input{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px}.weather-card form button{padding:8px 12px;border:none;border-radius:4px;cursor:pointer;font-size:14px;color:#fff}@media (max-width: 768px){.form-container{padding:10px}.weather-results{grid-template-columns:1fr}.weather-form{max-width:100%}}.loading{opacity:.6;pointer-events:none}.message.success{background-color:#d4edda;color:#155724;border-color:#c3e6cb}.message.error{background-color:#f8d7da;color:#721c24;border-color:#f5c6cb}.app{font-family:Arial,sans-serif;padding:2rem;max-width:800px;margin:auto}form{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}input,button{padding:.5rem;font-size:1rem}.weather-results{display:grid;gap:1rem}.card{border:1px solid #ccc;border-radius:8px;padding:1rem;background:#f9f9f9}