:root{--bg: #0b1220;--card: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .08);--text: #e5e7eb;--subtext: #9ca3af;--accent: #38bdf8;--error: #f87171}*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif}body{background:radial-gradient(circle at top,#111827,#020617);color:var(--text);overflow-x:hidden}.app{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;position:relative;overflow:hidden;transition:background .8s ease}.card{width:100%;max-width:500px;background:var(--card);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-radius:24px;padding:24px;border:1px solid var(--border);box-shadow:0 20px 50px #00000080;animation:fadeIn .5s ease-out,cardGlow 6s ease-in-out infinite;position:relative;z-index:10;transition:all .3s ease}@keyframes cardGlow{0%,to{box-shadow:0 20px 50px #00000080,0 0 #38bdf800}50%{box-shadow:0 20px 50px #00000080,0 0 45px #38bdf82e}}.card:hover{border-color:#38bdf833}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.title{text-align:center;font-size:1.5rem;margin-bottom:20px;position:relative;padding-bottom:10px}.search{display:flex;gap:10px;position:relative}.search input{flex:1;padding:14px;border-radius:14px;border:1px solid var(--border);background:#ffffff0d;color:var(--text);font-size:16px;transition:border-color .3s}.search input:focus{outline:none;border-color:var(--accent)}.search button{padding:0 20px;border-radius:14px;border:none;background:var(--accent);color:#001018;font-weight:700;cursor:pointer;transition:transform .2s}.search button:active{transform:scale(.95)}.error-wrapper{display:flex;justify-content:center;margin:12px 0}.error-box{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;width:320px;padding:12px;display:flex;flex-direction:row;align-items:center;justify-content:start;background:#fce8db;border-radius:8px;border:1px solid #EF665B;box-shadow:0 0 5px -3px #111;animation:errorShake .4s ease-in-out}.error__icon{width:20px;height:20px;transform:translateY(-2px);margin-right:8px}.error__icon path{fill:#ef665b}.error__title{font-weight:500;font-size:14px;color:#71192f}.error__close{width:20px;height:20px;cursor:pointer;margin-left:auto;display:flex;align-items:center;justify-content:center}.error__close path{fill:#71192f}@keyframes errorShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.input-error{border-color:#f8717180!important}.status-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--subtext)}.welcome-view{padding:40px 20px;text-align:center;animation:fadeIn .8s ease}.welcome-icon{font-size:50px;margin-bottom:15px;filter:drop-shadow(0 0 10px rgba(56,189,248,.3))}.welcome-view h2{font-size:22px;color:var(--text);margin-bottom:8px}.welcome-view p{font-size:14px;color:var(--subtext);line-height:1.5}.suggestions{margin-top:5px;background:#0f172af2;border:1px solid var(--border);border-radius:12px;max-height:200px;overflow-y:auto;position:absolute;width:calc(100% - 100px);z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.suggestions div{padding:12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--border)}.suggestions div:hover{background:#ffffff1a}.spinner{width:30px;height:30px;border:3px solid rgba(255,255,255,.1);border-top:3px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.weather{margin:25px 0;text-align:center;animation:fadeIn .4s ease}.temp{font-size:64px;font-weight:800;line-height:1;margin:10px 0}.condition-text{text-transform:capitalize;color:var(--subtext);margin-bottom:20px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.box{background:#ffffff08;padding:12px;border-radius:14px;border:1px solid var(--border);font-size:13px;display:flex;align-items:center;justify-content:center}.forecast{margin-top:30px}.forecast h3{font-size:16px;margin-bottom:12px;color:var(--accent);text-align:left}.forecast-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px}.forecast-grid::-webkit-scrollbar{height:4px}.forecast-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}.forecast-card{min-width:90px;flex-shrink:0;padding:15px 10px;background:#ffffff08;border:1px solid var(--border);border-radius:16px;text-align:center}.forecast-card.small{min-width:70px}.small-text{font-size:11px;color:var(--subtext);margin:5px 0}.clear{background:radial-gradient(circle at top,#1e293b,#020617)}.clouds{background:radial-gradient(circle at top,#334155,#020617)}.rain{background:radial-gradient(circle at top,#0f172a,#1e3a8a,#020617)}.snow{background:radial-gradient(circle at top,#3f4e63,#020617)}.rain-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.raindrop{position:absolute;width:1.5px;height:20px;background:linear-gradient(transparent,#fff);opacity:.4;animation:fall linear infinite}@keyframes fall{to{transform:translateY(110vh)}}.lightning{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none;z-index:6;animation:flash 8s infinite}@keyframes flash{0%,90%,to{opacity:0}91%{opacity:.6}92%{opacity:0}94%{opacity:.3}95%{opacity:0}}.sun-glow{position:fixed;top:10%;left:50%;transform:translate(-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(255,215,120,.35),transparent 70%);pointer-events:none;z-index:1;animation:pulse 4s infinite ease-in-out}@keyframes pulse{0%,to{opacity:.4;transform:translate(-50%) scale(1)}50%{opacity:.8;transform:translate(-50%) scale(1.15)}}.clouds-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.cloud{position:absolute;background:#ffffff26;width:300px;height:100px;border-radius:100px;filter:blur(50px);animation:moveClouds linear infinite}.c1{top:15%;left:-20%;animation-duration:30s}.c2{top:40%;right:-20%;animation-duration:45s;opacity:.1}.c3{top:10%;right:10%;animation-duration:25s;width:200px}@keyframes moveClouds{0%{transform:translate(-20vw)}to{transform:translate(120vw)}}.dark-mode .card{background:#0f172ad9;border-color:#ffffff0d}.light-mode .card{background:#ffffff1a}.geo-btn{background:#ffffff1a!important;font-size:18px;padding:0 12px!important;border-radius:14px}.chart-container{margin:20px 0;background:#00000026;padding:15px;border-radius:20px}@media(max-width:480px){.app{padding:10px;align-items:flex-start;overflow-y:auto}.card{min-height:92vh;border-radius:30px;display:flex;flex-direction:column;padding:20px 15px;margin-bottom:20px}.temp{font-size:70px}.search input{font-size:14px;padding:12px}.grid{grid-template-columns:repeat(2,1fr);gap:8px}.box{padding:10px;font-size:12px}.forecast-card{min-width:85px}.chart-container{padding:10px;margin:15px 0}}.lang-switcher{display:flex;gap:8px}.lang-switcher button{background:#ffffff1a;border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:8px;cursor:pointer;font-size:12px;transition:all .2s}.lang-switcher button:hover{background:var(--accent);color:#000}.shake{animation:shake .4s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}}.error-msg-input{color:var(--error);font-size:13px;margin-top:5px;margin-left:10px;font-weight:500}.title:hover{opacity:.7}.loader-container{display:flex;justify-content:center;align-items:center;padding:20px 0;width:100%}.pl{display:block;width:60px;height:60px}.pl__arrows,.pl__ring-rotate,.pl__ring-stroke,.pl__tick{animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.pl__arrows{animation-name:arrows42;transform:rotate(45deg);transform-origin:16px 52px}.pl__ring-rotate,.pl__ring-stroke{transform-origin:80px 80px}.pl__ring-rotate{animation-name:ringRotate42}.pl__ring-stroke{animation-name:ringStroke42;transform:rotate(-45deg)}.pl__tick{animation-name:tick42}.pl__tick:nth-child(2){animation-delay:-1.75s}.pl__tick:nth-child(3){animation-delay:-1.5s}.pl__tick:nth-child(4){animation-delay:-1.25s}.pl__tick:nth-child(5){animation-delay:-1s}.pl__tick:nth-child(6){animation-delay:-.75s}.pl__tick:nth-child(7){animation-delay:-.5s}.pl__tick:nth-child(8){animation-delay:-.25s}@keyframes arrows42{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}@keyframes ringRotate42{0%{transform:rotate(0)}to{transform:rotate(720deg)}}@keyframes ringStroke42{0%,to{stroke-dashoffset:452;transform:rotate(-45deg)}50%{stroke-dashoffset:169.5;transform:rotate(-180deg)}}@keyframes tick42{0%,3%,47%,to{stroke-dashoffset:-12}14%,36%{stroke-dashoffset:0}}.weather img{animation:floatIcon 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(56,189,248,.25))}@keyframes floatIcon{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(3deg)}}.temp{background:linear-gradient(90deg,var(--text) 0%,var(--accent) 25%,#ffffff 50%,var(--accent) 75%,var(--text) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmerTemp 5s linear infinite}@keyframes shimmerTemp{to{background-position:-220% center}}.forecast-card{animation:riseIn .5s cubic-bezier(.22,1,.36,1) both}.forecast-card:nth-child(1){animation-delay:.03s}.forecast-card:nth-child(2){animation-delay:.06s}.forecast-card:nth-child(3){animation-delay:.09s}.forecast-card:nth-child(4){animation-delay:.12s}.forecast-card:nth-child(5){animation-delay:.15s}.forecast-card:nth-child(6){animation-delay:.18s}.forecast-card:nth-child(7){animation-delay:.21s}.forecast-card:nth-child(n+8){animation-delay:.24s}@keyframes riseIn{0%{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.card,.weather img,.temp,.forecast-card{animation:none!important}}.app:before{content:"";position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background:conic-gradient(from 0deg,#38bdf8,#a78bfa,#34d399,#38bdf8);filter:blur(120px);opacity:.16;z-index:0;animation:auroraSpin 20s linear infinite;pointer-events:none}@keyframes auroraSpin{to{transform:rotate(360deg)}}.app:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 65% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 60%,#fff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent),radial-gradient(2px 2px at 90% 40%,#fff,transparent),radial-gradient(1px 1px at 10% 70%,#fff,transparent);background-repeat:no-repeat;opacity:.4;z-index:0;animation:twinkle 4s ease-in-out infinite alternate;pointer-events:none}@keyframes twinkle{0%{opacity:.15}to{opacity:.55}}.title:after{content:"";position:absolute;bottom:0;left:50%;width:50px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),#a78bfa);transform:translate(-50%) scaleX(0);transform-origin:center;animation:drawUnderline .8s .3s cubic-bezier(.22,1,.36,1) forwards}@keyframes drawUnderline{to{transform:translate(-50%) scaleX(1)}}@media(prefers-reduced-motion:reduce){.app:before,.app:after,.title:after{animation:none!important}}
