.app-container{width:100%;max-width:800px;margin:0 auto}.weather-app{background:#fff;border-radius:20px;margin:20px;overflow:hidden;box-shadow:0 20px 40px #0000001a}.app-header{color:#fff;text-align:center;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);padding:30px}.app-header h1{margin-bottom:10px;font-size:2.2rem;font-weight:700}.app-header p{opacity:.9;font-size:1.1rem}.search-form{padding:30px}.search-box{background:#f8fafc;border-radius:12px;align-items:center;gap:10px;padding:5px;display:flex}.search-icon{color:#6b7280;flex-shrink:0;margin-left:15px}.search-input{background:0 0;border:none;outline:none;flex:1;padding:15px;font-size:16px}.search-input:disabled{opacity:.7}.search-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#4f46e5;border:none;border-radius:8px;padding:15px 25px;font-size:16px;font-weight:600;transition:all .3s}.search-btn:hover:not(:disabled){background:#4338ca;transform:translateY(-1px)}.search-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.last-searched{color:#6b7280;justify-content:center;align-items:center;gap:8px;margin-top:-20px;margin-bottom:20px;font-size:.9rem;display:flex}.error-message{color:#dc2626;text-align:center;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;margin:0 30px 30px;padding:15px}.weather-content{padding:0 30px 30px}.current-weather{text-align:center;margin-bottom:30px}.current-weather h2{color:#1f2937;margin-bottom:20px;font-size:1.8rem}.weather-main{justify-content:center;align-items:center;gap:20px;margin-bottom:10px;display:flex}.weather-icon{font-size:4rem}.temperature{color:#4f46e5;font-size:3rem;font-weight:700}.weather-description{color:#6b7280;text-transform:capitalize;margin-bottom:20px;font-size:1.2rem}.weather-details{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;max-width:500px;margin:0 auto;display:grid}.detail-item{color:#374151;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:10px;padding:15px;display:flex}.detail-item svg{color:#4f46e5;flex-shrink:0}.forecast h3{color:#1f2937;text-align:center;margin-bottom:20px;font-size:1.5rem}.forecast-list{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px;display:grid}.forecast-item{text-align:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:15px;transition:transform .2s}.forecast-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.forecast-day{color:#1f2937;margin-bottom:10px;font-size:1rem;font-weight:700}.forecast-icon{margin:10px 0;font-size:2rem}.forecast-temp{justify-content:center;gap:10px;margin:10px 0;display:flex}.max-temp{color:#1f2937;font-size:1.1rem;font-weight:700}.min-temp{color:#6b7280;font-size:1.1rem}.forecast-desc{color:#6b7280;text-transform:capitalize;font-size:.9rem}.welcome-message{text-align:center;color:#6b7280;padding:40px;font-size:1.1rem}@media (max-width:768px){.weather-app{border-radius:15px;margin:10px}.app-header{padding:20px}.app-header h1{font-size:1.8rem}.search-form{padding:20px}.search-box{background:0 0;flex-direction:column;gap:15px;padding:0}.search-input{background:#f8fafc;border-radius:8px;padding:12px 15px}.search-icon{align-self:flex-start;margin-top:15px;margin-left:15px;position:absolute}.search-input{padding-left:45px}.weather-content{padding:0 20px 20px}.weather-main{flex-direction:column;gap:10px}.weather-icon{font-size:3rem}.temperature{font-size:2.5rem}.weather-details{grid-template-columns:1fr}.forecast-list{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.app-header h1{font-size:1.6rem}.app-header p{font-size:1rem}.forecast-list{grid-template-columns:1fr}.current-weather h2{font-size:1.5rem}.temperature{font-size:2rem}}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}#root{justify-content:center;align-items:center;width:100%;min-height:100vh;padding:20px;display:flex}html{scroll-behavior:smooth}:focus{outline-offset:2px;outline:2px solid #4f46e5}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}