*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,Segoe UI,sans-serif}body{min-height:100vh;background:radial-gradient(circle at top,#0b0b0b,#000 85%);display:flex;justify-content:center;align-items:center;color:#fff}.app{width:440px;padding:42px 32px;border-radius:26px;background:#0f0f0ff5;box-shadow:0 0 60px #fc611e26;text-align:center}.title{font-size:28px;font-weight:600;margin-bottom:30px;color:#fc611e;letter-spacing:.6px}.search-bar{display:flex;gap:12px;margin-bottom:32px;transition:transform .25s ease}.search-bar.active{transform:scale(.97)}.search-bar input{flex:1;padding:14px 16px;border-radius:14px;border:none;background:#111;color:#fff;font-size:14px;outline:none}.search-bar input::placeholder{color:#888}.search-bar input:focus{box-shadow:0 0 14px #fc611e99}.search-bar button{padding:14px 20px;border-radius:14px;border:none;background:linear-gradient(135deg,#fc611e,#d94f14);color:#000;font-weight:600;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}.search-bar button:hover{transform:translateY(-2px);box-shadow:0 0 20px #fc611e99}.weather-card{margin-top:12px;padding:34px 28px;border-radius:28px;background:linear-gradient(145deg,#1a1a1a,#0e0e0e);box-shadow:0 22px 55px #000000e6}.fade-scale{animation:fadeScale .6s ease forwards}@keyframes fadeScale{0%{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.city{font-size:24px;font-weight:600;margin-bottom:6px}.icon{width:92px;margin:6px 0}.temp{font-size:46px;font-weight:700;color:#fc611e;margin:6px 0}.condition-text{text-transform:capitalize;opacity:.9;margin-bottom:20px}.details{display:flex;justify-content:space-between;font-size:14px;opacity:.9}.clear{background:linear-gradient(135deg,#fc611e,#d94f14);color:#000}.clouds{background:linear-gradient(135deg,#3a3a3a,#000)}.rain{background:linear-gradient(135deg,#141e30,#243b55)}.snow{background:linear-gradient(135deg,#83a4d4,#b6fbff);color:#000}.thunderstorm{background:linear-gradient(135deg,#232526,#414345)}.skeleton-card{margin-top:12px;padding:34px 28px;border-radius:28px;background:#111}.skeleton{height:16px;background:linear-gradient(90deg,#222,#333,#222);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;margin:12px auto}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.error{color:#ff6b6b;margin-top:12px;font-size:14px}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,rgba(252,97,30,.12),transparent 40%),radial-gradient(circle at 80% 80%,rgba(252,97,30,.08),transparent 40%);animation:bgMove 12s ease-in-out infinite alternate;z-index:-1}@keyframes bgMove{0%{transform:translateY(-10px)}to{transform:translateY(10px)}}.empty-state{margin-top:20px;padding:30px;border-radius:22px;background:#ffffff0d;text-align:center;animation:fadeScale .6s ease}.empty-icon{font-size:36px;margin-bottom:10px}.empty-text{font-size:14px;opacity:.85}.error-card{margin-top:15px;padding:18px;border-radius:18px;background:#ff50501f;color:#ffb3b3;display:flex;gap:10px;align-items:center;animation:fadeScale .5s ease}.error-icon{font-size:20px}.error-text{font-size:14px}.condition-badge{display:inline-block;padding:6px 14px;border-radius:20px;background:#fc611e33;color:#fc611e;font-size:12px;font-weight:600;margin-bottom:10px}