*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fff;--bg-subtle:#f8f8f8;--surface:#ffffffb8;--surface-hover:#ffffffeb;--border:#e8e8e8;--border-focus:#3b82f6;--text-primary:#111;--text-secondary:#6b7280;--text-muted:#9ca3af;--accent:#3b82f6;--accent-light:#3b82f614;--accent-medium:#3b82f629;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 16px #00000014, 0 2px 6px #0000000a;--shadow-lg:0 12px 40px #0000001a, 0 4px 12px #0000000d;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-full:9999px;--transition:.3s cubic-bezier(.4, 0, .2, 1);--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif}html{font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);background:var(--bg);font-size:16px;line-height:1.5}body{background-color:#f0f4ff;background-image:radial-gradient(80% 60% at 50% -10%,#3b82f614 0%,#0000 60%),radial-gradient(40% 40% at 90% 80%,#63aaff0f 0%,#0000 50%);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;min-height:100vh}#root{justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.app{width:100%;max-width:480px}.app-header{text-align:center;margin-bottom:32px}.app-logo{color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;font-size:14px;font-weight:600;display:inline-flex}.app-logo svg{color:var(--accent)}.search-container{align-items:center;gap:10px;margin-bottom:28px;display:flex}.search-wrapper{flex:1;position:relative}.search-icon{color:var(--text-muted);pointer-events:none;transition:color var(--transition);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.search-input{border:1.5px solid var(--border);border-radius:var(--radius-full);width:100%;height:52px;font-family:var(--font);color:var(--text-primary);transition:border-color var(--transition), box-shadow var(--transition);box-shadow:var(--shadow-sm);background:#fff;outline:none;padding:0 16px 0 44px;font-size:15px;font-weight:400}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 4px #3b82f61a, var(--shadow-sm)}.search-input:focus~.search-icon,.search-wrapper:focus-within .search-icon{color:var(--accent)}.search-btn{background:var(--accent);color:#fff;cursor:pointer;width:52px;height:52px;transition:background var(--transition), transform var(--transition), box-shadow var(--transition);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 14px #3b82f659}.search-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 6px 20px #3b82f673}.search-btn:active{transform:translateY(0);box-shadow:0 2px 8px #3b82f64d}.search-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.weather-card{background:var(--surface);-webkit-backdrop-filter:blur(20px)saturate(180%);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1.5px solid #ffffffd9;padding:36px 32px 28px;animation:.4s cubic-bezier(.4,0,.2,1) both fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.location-row{align-items:center;gap:6px;margin-bottom:28px;display:flex}.location-pin{color:var(--accent);flex-shrink:0}.location-name{color:var(--text-primary);letter-spacing:-.01em;font-size:15px;font-weight:600}.location-country{color:var(--text-secondary);margin-left:2px;font-size:14px;font-weight:400}.location-time{color:var(--text-muted);margin-left:auto;font-size:13px;font-weight:400}.weather-main{align-items:center;gap:20px;margin-bottom:6px;display:flex}.weather-icon-wrap{background:var(--accent-light);border-radius:var(--radius-md);border:1.5px solid var(--accent-medium);flex-shrink:0;justify-content:center;align-items:center;width:96px;height:96px;animation:3s ease-in-out infinite pulseIcon;display:flex}@keyframes pulseIcon{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.temperature{color:var(--text-primary);letter-spacing:-3px;font-size:72px;font-weight:300;line-height:1}.temperature sup{letter-spacing:0;vertical-align:super;color:var(--text-secondary);font-size:28px;font-weight:400}.weather-description{color:var(--text-secondary);letter-spacing:.01em;text-transform:capitalize;margin-bottom:28px;margin-left:0;font-size:16px;font-weight:400}.divider{background:var(--border);opacity:.7;height:1px;margin:0 -4px 24px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.stat-card{background:var(--bg-subtle);border:1.5px solid var(--border);border-radius:var(--radius-md);text-align:center;transition:background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);cursor:default;padding:16px 12px}.stat-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);background:#fff;transform:translateY(-2px)}.stat-icon{color:var(--accent);justify-content:center;align-items:center;margin-bottom:10px;display:flex}.stat-value{color:var(--text-primary);letter-spacing:-.5px;margin-bottom:4px;font-size:20px;font-weight:600;line-height:1}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:500}.loading-state{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:#ffffffb8;border:1.5px solid #ffffffd9;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:56px 32px;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-muted);font-size:14px;font-weight:400}.error-state{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:center;background:#ffffffb8;border:1.5px solid #fecaca;flex-direction:column;align-items:center;gap:10px;padding:36px 32px;animation:.3s both fadeInUp;display:flex}.error-icon{font-size:36px}.error-title{color:#dc2626;font-size:16px;font-weight:600}.error-message{color:var(--text-secondary);font-size:14px}.empty-state{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;background:#ffffffb8;border:1.5px solid #ffffffd9;flex-direction:column;align-items:center;gap:12px;padding:52px 32px;animation:.4s both fadeInUp;display:flex}.empty-state-icon{background:var(--accent-light);width:72px;height:72px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;margin-bottom:4px;display:flex}.empty-title{color:var(--text-primary);letter-spacing:-.02em;font-size:18px;font-weight:600}.empty-subtitle{color:var(--text-secondary);max-width:260px;font-size:14px;line-height:1.6}.app-footer{text-align:center;color:var(--text-muted);margin-top:20px;font-size:12px}@media (width<=520px){.weather-card{padding:28px 22px 24px}.temperature{font-size:60px}.weather-icon-wrap{width:80px;height:80px}.stats-grid{gap:8px}.stat-card{padding:14px 8px}.stat-value{font-size:17px}}