body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(-45deg,#3a7bd5,#00d2ff,#4facfe,#00f2fe);background-size:400% 400%;animation:gradientBG 15s ease infinite;min-height:100vh;display:flex;flex-direction:column}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app-container{flex-grow:1;display:flex;justify-content:center;align-items:center;padding:20px;text-align:center}.weather-card{background:rgba(255,255,255,.2);border-radius:20px;padding:40px 35px;box-shadow:0 12px 40px #00000040;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:#fff;max-width:420px;width:100%;transition:transform .3s ease,box-shadow .3s ease}.weather-card:hover{transform:translateY(-5px);box-shadow:0 16px 48px #0000004d}.weather-card input{padding:12px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.3);background-color:#ffffff26;color:#000;font-size:16px;width:70%;margin-bottom:15px;outline:none;transition:.3s}.weather-card input::placeholder{color:#fff9}.weather-card input:focus{border-color:#00c6ff;background-color:#ffffff40}.weather-card button{padding:12px 22px;border-radius:20px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:700;cursor:pointer;margin-left:10px;transition:background .3s ease}.weather-card button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1)}.weather-card h2{margin-top:20px;font-size:32px;font-weight:600;color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.3)}.weather-card p{margin:12px 0;font-size:20px;font-weight:500;color:#e0f7ff}.footer{text-align:center;color:#fff;font-size:14px;opacity:.85;padding:15px 0;background:transparent}@media (max-width: 480px){.weather-card{padding:30px 25px}.weather-card input{width:100%;margin-bottom:10px}.weather-card button{margin-left:0;margin-top:10px;width:100%}}.footer a{color:#4facfe;text-decoration:none;font-weight:700;transition:color .3s ease}.footer a:hover{color:#00c6ff}.app-container{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding-bottom:60px}.footer{position:absolute;bottom:10px;width:100%;text-align:center;font-size:14px;color:#333;background:transparent}html,body{margin:0;padding:0;height:100%;font-family:Arial,sans-serif}.app-container{display:flex;flex-direction:column;min-height:100vh;position:relative}.weather-card{background:white;padding:2rem;border-radius:20px;box-shadow:0 10px 20px #0000001a;text-align:center;max-width:300px;margin:auto}.footer{position:fixed;bottom:10px;left:0;right:0;text-align:center;font-size:14px;color:#333}.footer a{color:#4a90e2;text-decoration:none;font-weight:600}.footer a:hover{text-decoration:underline}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:#eef2f5;color:#333}.app-container{position:relative;width:100%;min-height:100vh;display:flex;justify-content:center;align-items:start;padding:2rem;overflow:hidden}.bg-animation{position:absolute;top:0;left:0;width:100%;height:40%;background:linear-gradient(135deg,#fef3c7,#fed7aa 60%,#a5b4fc 100%);z-index:-1;animation:pulseBg 6s ease-in-out infinite;filter:blur(8px);opacity:.85}@keyframes pulseBg{0%{transform:scaleY(1);opacity:.8}50%{transform:scaleY(1.2);opacity:1}to{transform:scaleY(1);opacity:.8}}.weather-card{background:rgba(255,255,255,.7);padding:2rem;border-radius:18px;box-shadow:0 8px 32px #1f26872e;width:360px;text-align:center;z-index:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.25);transition:transform .3s cubic-bezier(.4,2,.6,1),box-shadow .3s}.weather-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 16px 40px #5050b42e}.weather-card input{width:60%;padding:.5rem;font-size:1rem;border:1.5px solid #a5b4fc;border-radius:6px;outline:none;background:rgba(245,245,255,.7);transition:border .2s;box-shadow:0 1px 4px #a4b4fc14}.weather-card input:focus{border:1.5px solid #6366f1;background:#fff}.weather-card button{padding:.5rem 1.2rem;margin-left:.5rem;font-size:1rem;border:none;border-radius:6px;background:linear-gradient(90deg,#6366f1 60%,#818cf8 100%);color:#fff;cursor:pointer;box-shadow:0 2px 12px #6366f12e;transition:background .2s,box-shadow .2s,transform .2s;font-weight:600;letter-spacing:.5px}.weather-card button:hover{background:linear-gradient(90deg,#4338ca 60%,#6366f1 100%);box-shadow:0 4px 24px #6366f147;transform:scale(1.05)}.weather-card h2{margin-top:1.5rem;font-size:2rem;color:#4f46e5;letter-spacing:1px;text-shadow:0 2px 8px #a5b4fc33;animation:fadeInDown .7s}.weather-card p{margin-top:.7rem;font-size:1.2rem;color:#374151;animation:fadeInUp .7s}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.weather-card p[style*="color: red"]{color:#ef4444!important;font-weight:600;letter-spacing:.5px;animation:shake .4s}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}to{transform:translate(0)}}