:root{--primary:#5b4fb5;--secondary:#8b7fd4;--bg:#f8f9fa;--text:#333;--border:#e0e0e0;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--text);min-height:100vh;padding:20px;}
.container{max-width:900px;margin:0 auto;background:white;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.15);padding:40px;}
h1{text-align:center;color:var(--primary);margin-bottom:20px;font-size:2.2rem;}
.controls{display:flex;gap:15px;margin-bottom:30px;flex-wrap:wrap;}
input[type="text"]{flex:1;min-width:200px;padding:12px 15px;border:2px solid var(--border);border-radius:8px;font-size:1rem;}
button{background:var(--primary);color:white;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;}
button:hover{background:var(--secondary);transform:translateY(-2px);box-shadow:0 5px 15px rgba(91,79,181,.4);}
.weather-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:30px 0;}
.weather-card{background:var(--bg);padding:25px;border-radius:12px;border-left:4px solid var(--primary);text-align:center;}
.temp{font-size:3rem;font-weight:700;color:var(--primary);margin:10px 0;}
.condition{font-size:1.1rem;color:#666;margin-bottom:10px;}
.forecast{background:var(--bg);padding:20px;border-radius:12px;margin-top:30px;}
.forecast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:15px;margin-top:15px;}
.forecast-item{background:white;padding:15px;border-radius:8px;text-align:center;border:1px solid var(--border);}
.forecast-day{font-weight:600;color:var(--primary);margin-bottom:5px;}
.forecast-temp{font-size:1.2rem;color:var(--text);}
@media(max-width:600px){.container{padding:20px;}.weather-cards{grid-template-columns:1fr;}.forecast-grid{grid-template-columns:repeat(2,1fr);}h1{font-size:1.8rem;}input[type="text"]{min-width:auto;}}