@import"https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}.app-root{--grad-a: #dbeafe;--grad-b: #bfdbfe;--grad-c: #e0f2fe;--accent: #60a5fa;--accent-glow: rgba(96, 165, 250, .35);--card-bg: rgba(255, 255, 255, .58);--temp-color: #2563eb;--icon-glow: drop-shadow(0 4px 14px rgba(96, 165, 250, .55));--text-primary: #1e3a5f;--text-muted: #5a7a9e;--divider: rgba(96, 165, 250, .18)}.app-root.theme-cold{--grad-a: #e0e7ff;--grad-b: #c7d2fe;--grad-c: #ddd6fe;--accent: #818cf8;--accent-glow: rgba(129, 140, 248, .38);--card-bg: rgba(255, 255, 255, .6);--temp-color: #4338ca;--icon-glow: drop-shadow(0 4px 14px rgba(129, 140, 248, .55));--text-primary: #312e81;--text-muted: #6366f1;--divider: rgba(129, 140, 248, .2)}.app-root.theme-mild{--grad-a: #d1fae5;--grad-b: #a7f3d0;--grad-c: #cffafe;--accent: #34d399;--accent-glow: rgba(52, 211, 153, .38);--card-bg: rgba(255, 255, 255, .6);--temp-color: #065f46;--icon-glow: drop-shadow(0 4px 14px rgba(52, 211, 153, .55));--text-primary: #064e3b;--text-muted: #059669;--divider: rgba(52, 211, 153, .2)}.app-root.theme-warm{--grad-a: #fef3c7;--grad-b: #fed7aa;--grad-c: #fde68a;--accent: #f59e0b;--accent-glow: rgba(245, 158, 11, .38);--card-bg: rgba(255, 255, 255, .62);--temp-color: #b45309;--icon-glow: drop-shadow(0 4px 14px rgba(251, 191, 36, .55));--text-primary: #78350f;--text-muted: #d97706;--divider: rgba(245, 158, 11, .2)}.app-root.theme-hot{--grad-a: #ffe4e6;--grad-b: #fecdd3;--grad-c: #fde8d8;--accent: #fb7185;--accent-glow: rgba(251, 113, 133, .38);--card-bg: rgba(255, 255, 255, .62);--temp-color: #be123c;--icon-glow: drop-shadow(0 4px 14px rgba(251, 113, 133, .55));--text-primary: #881337;--text-muted: #e11d48;--divider: rgba(251, 113, 133, .2)}.app-root{min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;background:linear-gradient(145deg,var(--grad-a) 0%,var(--grad-b) 50%,var(--grad-c) 100%);font-family:Nunito,system-ui,sans-serif;transition:background .8s ease}.app-title{font-size:1.9rem;font-weight:700;color:var(--text-primary);margin-bottom:28px;letter-spacing:-.3px;text-align:center;transition:color .6s ease}.app-title .title-icon{display:inline-block;margin-right:8px;animation:float 3.5s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.search-bar{display:flex;gap:10px;width:100%;max-width:440px;margin-bottom:28px}.search-field{flex:1;padding:12px 18px;border:1.5px solid rgba(255,255,255,.7);border-radius:50px;background:#ffffffbf;color:var(--text-primary);font-size:.95rem;font-family:Nunito,system-ui,sans-serif;font-weight:500;outline:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 12px #00000012;transition:border-color .25s ease,box-shadow .25s ease,background .6s ease}.search-field::placeholder{color:var(--text-muted);opacity:.7}.search-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow),0 2px 12px #00000012;background:#ffffffeb}.search-btn{padding:12px 22px;border:none;border-radius:50px;background:var(--accent);color:#fff;font-size:.9rem;font-weight:700;font-family:Nunito,system-ui,sans-serif;cursor:pointer;white-space:nowrap;box-shadow:0 4px 16px var(--accent-glow);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background .6s ease}.search-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--accent-glow);filter:brightness(1.08)}.search-btn:active{transform:translateY(0);filter:brightness(.96)}.weather-card{width:100%;max-width:400px;background:var(--card-bg);border:1px solid rgba(255,255,255,.75);border-radius:28px;padding:36px 32px 32px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px #00000014,0 1px 1px #ffffffe6 inset;text-align:center;transition:background .6s ease,box-shadow .3s ease,transform .3s ease;animation:cardIn .45s cubic-bezier(.22,1,.36,1) both}.weather-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px #0000001c,0 1px 1px #ffffffe6 inset}@keyframes cardIn{0%{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.card-city{font-size:1.65rem;font-weight:700;color:var(--text-primary);margin-bottom:2px;letter-spacing:-.3px;transition:color .6s ease}.card-icon{width:96px;height:96px;margin:6px auto 2px;filter:var(--icon-glow);transition:filter .6s ease}.card-description{font-size:.95rem;font-weight:500;color:var(--text-muted);margin-bottom:18px;text-transform:capitalize;transition:color .6s ease}.card-temp{font-size:5rem;font-weight:700;line-height:1;color:var(--temp-color);letter-spacing:-3px;margin-bottom:28px;transition:color .6s ease}.card-temp sup{font-size:1.6rem;font-weight:500;letter-spacing:0;color:var(--text-muted);vertical-align:super}.card-divider{width:100%;height:1px;background:var(--divider);margin-bottom:22px;border:none;transition:background .6s ease}.card-stats{display:flex;justify-content:space-around;gap:8px}.card-stat{display:flex;flex-direction:column;align-items:center;gap:5px}.stat-emoji{font-size:1.2rem}.stat-value{font-size:1rem;font-weight:700;color:var(--text-primary);transition:color .6s ease}.stat-label{font-size:.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.09em;transition:color .6s ease}.empty-state{color:var(--text-muted);font-size:.95rem;font-weight:500;opacity:.7;margin-top:4px;transition:color .6s ease}.loading-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--text-muted);font-size:.9rem;font-weight:500}.spinner{width:40px;height:40px;border-radius:50%;border:3px solid var(--divider);border-top-color:var(--accent);animation:spin .75s linear infinite;transition:border-top-color .6s ease}@keyframes spin{to{transform:rotate(360deg)}}.error-pill{font-size:.9rem;font-weight:600;color:#be123c;background:#ffe4e6d9;border:1px solid rgba(251,113,133,.35);border-radius:50px;padding:10px 24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@media(max-width:480px){.app-title{font-size:1.5rem}.search-bar{flex-direction:column}.search-btn{width:100%;text-align:center}.card-temp{font-size:4rem}.weather-card{padding:28px 20px 24px}.card-city{font-size:1.4rem}}