@import "https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{box-sizing:border-box;background:#e2d4ff;margin:0;padding:0;font-family:Roboto,sans-serif}.app{min-hight:100vh;background:#e2d4ff;display:grid}*{box-sizing:border-box}.weather{background:linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f093fb 75%,#4facfe 100%) 0 0/200% 200%;justify-content:center;align-items:center;min-height:100vh;padding:24px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;animation:8s infinite gradient-shift;display:flex}@keyframes gradient-shift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #ffffff80;border-radius:24px;width:100%;max-width:520px;padding:32px;animation:.5s ease-out slide-in;box-shadow:0 20px 60px #0000004d}@keyframes slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center;margin-bottom:28px}.title{color:#1e293b;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 8px;font-size:32px;font-weight:700}.subtitle{color:#64748b;margin:0;font-size:14px;font-weight:500}.search-bar{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border:2px solid #0000;border-radius:16px;align-items:center;gap:12px;margin-bottom:24px;padding:14px 16px;transition:all .3s;display:flex}.search-bar:focus-within{border-color:#667eea;box-shadow:0 8px 24px #667eea33}.search-bar input{color:#1e293b;background:0 0;border:none;outline:none;flex:1;font-size:16px;font-weight:500}.search-bar input::placeholder{color:#94a3b8}.icon-btn{cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:12px;justify-content:center;align-items:center;padding:8px 12px;transition:all .3s;display:inline-flex;box-shadow:0 4px 12px #667eea4d}.icon-btn:hover{transform:scale(1.05);box-shadow:0 6px 16px #667eea66}.icon-btn:active{transform:scale(.95)}.icon-btn img{filter:none;width:20px;height:20px;display:block}.weather-header-section{background:#fff;border:1px solid #94a3b83d;border-radius:28px;align-items:center;gap:20px;margin-bottom:22px;padding:22px;animation:.4s ease-out slide-in;display:flex;box-shadow:0 18px 45px #94a3b829}.weather-icon-section{flex-shrink:0;justify-content:center;align-items:center;display:flex}.permanent-weather-icon{object-fit:contain;filter:drop-shadow(0 4px 12px #00000026);width:120px;height:120px}.city-info{flex-direction:column;flex:1;gap:8px;display:flex}.city-name{color:#1e293b;margin:0;font-size:28px;font-weight:700;line-height:1.2}.condition-description{color:#64748b;text-transform:capitalize;margin:0;font-size:15px;font-weight:600}.quick-info-section{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px;display:grid}.quick-info-card{cursor:default;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb;border:1px solid #94a3b840;border-radius:24px;align-items:center;gap:16px;padding:20px;transition:transform .25s,box-shadow .25s,background .25s;display:flex}.quick-info-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px #667eea29}.quick-icon{object-fit:contain;filter:drop-shadow(0 2px 4px #00000014);flex-shrink:0;width:50px;height:50px}.quick-data{flex-direction:column;gap:4px;display:flex}.quick-label{color:#64748b;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:700}.quick-value{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:800}.humidity-quick{background:linear-gradient(135deg,#e0f2fe 0%,#e0e7ff 100%);border-color:#7dd3fc}.humidity-quick:hover{background:linear-gradient(135deg,#cffafe 0%,#ddd6fe 100%);border-color:#0284c7}.wind-quick{background:linear-gradient(135deg,#fee2e2 0%,#fef3c7 100%);border-color:#fca5a5}.wind-quick:hover{background:linear-gradient(135deg,#fecaca 0%,#fed7aa 100%);border-color:#dc2626}.temp-section{background:linear-gradient(135deg,#667eea0d 0%,#764ba20d 100%);border-radius:16px;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px;padding:24px;display:flex}.main-temp{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:56px;font-weight:800;line-height:1}.feels-like{color:#64748b;font-size:14px;font-weight:600}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:48px 24px;display:flex}.spinner{border:4px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:#64748b;margin:0;font-weight:600}.error{color:#7f1d1d;background:linear-gradient(135deg,#fecaca 0%,#fca5a5 100%);border-left:4px solid #dc2626;border-radius:12px;margin-top:12px;padding:16px;font-weight:600;animation:.3s ease-out slide-in}.weather-content{animation:.4s ease-out fade-in}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.location-section{margin-bottom:24px}.location{color:#1e293b;margin:0;font-size:24px;font-weight:700}.main-section{background:linear-gradient(135deg,#667eea14 0%,#764ba214 100%);border:2px solid #667eea26;border-radius:18px;align-items:center;gap:20px;margin-bottom:20px;padding:20px;animation:.4s ease-out slide-in;display:flex}.temp-display{flex-shrink:0;justify-content:center;align-items:center;display:flex}.temp{filter:drop-shadow(0 4px 12px #00000026);-webkit-text-fill-color:unset;background:0 0;background-clip:unset;width:120px;height:120px;margin:0;font-size:0}.unit{flex-direction:column;flex:1;gap:8px;display:flex}.weather-desc{flex-direction:column;gap:8px;display:flex}.weather-icon{filter:drop-shadow(0 4px 12px #0000001a);width:140px;height:140px}.desc-text{flex-direction:column;gap:4px;display:flex}.weather-title{color:#1e293b;font-size:22px;font-weight:700}.weather-sub{color:#64748b;text-transform:capitalize;font-size:15px;font-weight:500}.divider{background:linear-gradient(90deg,#0000,#e2e8f0,#0000);height:1px;margin:24px 0}.humidity-wind-section{grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px;display:grid}.icon-card{cursor:pointer;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border:2px solid #cbd5e1;border-radius:18px;align-items:center;gap:16px;padding:20px;transition:all .3s;display:flex}.icon-card:hover{background:linear-gradient(135deg,#667eea1a 0%,#764ba21a 100%);border-color:#667eea;transform:translateY(-6px);box-shadow:0 12px 32px #667eea40}.icon-wrapper{background:#ffffffe6;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;display:flex;box-shadow:0 4px 12px #0000001a}.icon-small{object-fit:contain;filter:drop-shadow(0 2px 4px #0000001a);width:40px;height:40px}.card-info{flex-direction:column;flex:1;gap:6px;display:flex}.card-label{color:#64748b;text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:600}.card-value{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:800;line-height:1}.humidity-card{background:linear-gradient(135deg,#e0f2fe 0%,#e0e7ff 100%);border-color:#7dd3fc}.humidity-card:hover{background:linear-gradient(135deg,#cffafe 0%,#ddd6fe 100%);border-color:#0284c7}.wind-card{background:linear-gradient(135deg,#fee2e2 0%,#fef3c7 100%);border-color:#fca5a5}.wind-card:hover{background:linear-gradient(135deg,#fecaca 0%,#fed7aa 100%);border-color:#dc2626}.details-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.detail-card{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border:1px solid #cbd5e1;border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:16px;transition:all .3s;display:flex}.detail-card:hover{background:linear-gradient(135deg,#667eea15 0%,#764ba215 100%);border-color:#667eea;transform:translateY(-4px);box-shadow:0 8px 20px #667eea26}.detail-label{color:#64748b;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.detail-value{color:#1e293b;font-size:20px;font-weight:700}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:64px 24px;display:flex}.empty-icon{font-size:64px;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.empty-state p{color:#64748b;margin:0;font-size:16px;font-weight:600}@media (width<=768px){.card{padding:24px}.title{font-size:28px}.weather-header-section{gap:16px;padding:16px}.permanent-weather-icon{width:100px;height:100px}.city-name{font-size:24px}.quick-info-section{grid-template-columns:1fr;gap:12px;margin-bottom:16px}.quick-icon{width:45px;height:45px}.quick-value{font-size:24px}.main-temp{font-size:48px}.details-grid{grid-template-columns:repeat(2,1fr);gap:12px}}@media (width<=480px){.weather{padding:16px}.card{border-radius:20px;padding:20px}.title{font-size:24px}.weather-header-section{text-align:center;flex-direction:column;gap:12px;margin-bottom:16px;padding:14px}.permanent-weather-icon{width:90px;height:90px}.city-name{font-size:20px}.condition-description{font-size:13px}.quick-info-section{grid-template-columns:1fr;gap:10px;margin-bottom:14px}.quick-info-card{gap:12px;padding:14px}.quick-icon{width:40px;height:40px}.quick-label{font-size:11px}.quick-value{font-size:22px}.temp-section{margin-bottom:16px;padding:18px}.main-temp{font-size:42px}.feels-like{font-size:13px}.details-grid{grid-template-columns:1fr;gap:10px}.search-bar{margin-bottom:16px;padding:12px 14px}}