@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.loading-spinner__icon{animation:spin 1s linear infinite}.loading-spinner__text{font-weight:500;text-align:center;margin:0}.loading-spinner--small .loading-spinner__icon{width:24px;height:24px}.loading-spinner--small .loading-spinner__text{font-size:.875rem}.loading-spinner--medium .loading-spinner__icon{width:32px;height:32px}.loading-spinner--medium .loading-spinner__text{font-size:1rem}.loading-spinner--large .loading-spinner__icon{width:48px;height:48px}.loading-spinner--large .loading-spinner__text{font-size:1.125rem}.loading-spinner--primary .loading-spinner__icon{color:#3b82f6}.loading-spinner--primary .loading-spinner__text{color:#1f2937}.loading-spinner--secondary .loading-spinner__icon,.loading-spinner--secondary .loading-spinner__text{color:#6b7280}.loading-spinner--white .loading-spinner__icon,.loading-spinner--white .loading-spinner__text{color:#fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;border-radius:12px;text-align:center;max-width:400px;margin:0 auto}.error-message__content{display:flex;flex-direction:column;align-items:center;gap:1rem}.error-message__icon{width:48px;height:48px}.error-message__text{display:flex;flex-direction:column;gap:.5rem}.error-message__title{font-size:1.25rem;font-weight:600;margin:0}.error-message__description{font-size:1rem;margin:0;line-height:1.5}.error-message__retry-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s ease;font-size:.875rem}.error-message__retry-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.error-message__retry-btn:active{transform:translateY(0)}.error-message__retry-icon{width:16px;height:16px}.error-message--error{background-color:#fef2f2;border:1px solid #fecaca}.error-message--error .error-message__icon,.error-message--error .error-message__title{color:#dc2626}.error-message--error .error-message__description{color:#7f1d1d}.error-message--error .error-message__retry-btn{background-color:#dc2626;color:#fff}.error-message--error .error-message__retry-btn:hover{background-color:#b91c1c}.error-message--warning{background-color:#fffbeb;border:1px solid #fed7aa}.error-message--warning .error-message__icon,.error-message--warning .error-message__title{color:#d97706}.error-message--warning .error-message__description{color:#92400e}.error-message--warning .error-message__retry-btn{background-color:#d97706;color:#fff}.error-message--warning .error-message__retry-btn:hover{background-color:#b45309}.error-message--info{background-color:#eff6ff;border:1px solid #bfdbfe}.error-message--info .error-message__icon,.error-message--info .error-message__title{color:#2563eb}.error-message--info .error-message__description{color:#1e40af}.error-message--info .error-message__retry-btn{background-color:#2563eb;color:#fff}.error-message--info .error-message__retry-btn:hover{background-color:#1d4ed8}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;text-align:center;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-family:inherit;text-decoration:none;position:relative;overflow:hidden}.btn:focus{outline:none;box-shadow:0 0 0 3px #3b82f680}.btn:hover:not(.btn--disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.btn:active:not(.btn--disabled){transform:translateY(0)}.btn--small{padding:.5rem 1rem;font-size:.875rem;min-height:36px}.btn--medium{padding:.75rem 1.5rem;font-size:1rem;min-height:44px}.btn--large{padding:1rem 2rem;font-size:1.125rem;min-height:52px}.btn--primary{background-color:#3b82f6;color:#fff}.btn--primary:hover:not(.btn--disabled){background-color:#2563eb}.btn--secondary{background-color:#6b7280;color:#fff}.btn--secondary:hover:not(.btn--disabled){background-color:#4b5563}.btn--success{background-color:#10b981;color:#fff}.btn--success:hover:not(.btn--disabled){background-color:#059669}.btn--danger{background-color:#ef4444;color:#fff}.btn--danger:hover:not(.btn--disabled){background-color:#dc2626}.btn--outline{background-color:transparent;color:#3b82f6;border:2px solid #3b82f6}.btn--outline:hover:not(.btn--disabled){background-color:#3b82f6;color:#fff}.btn--ghost{background-color:transparent;color:#374151}.btn--ghost:hover:not(.btn--disabled){background-color:#f3f4f6}.btn--disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn--loading{color:transparent}.btn__loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.input-wrapper{display:flex;flex-direction:column;gap:.5rem;width:100%}.input-container{position:relative;display:flex;align-items:center}.input{width:100%;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;font-family:inherit;transition:all .2s ease;background-color:#fff;color:#374151}.input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.input::placeholder{color:#9ca3af}.input-icon{position:absolute;display:flex;align-items:center;justify-content:center;color:#6b7280;pointer-events:none;z-index:1}.input-icon--left{left:12px}.input-icon--right{right:12px}.input-error-message{font-size:.875rem;color:#ef4444;margin-top:.25rem}.input-wrapper--small .input{padding:.5rem .75rem;font-size:.875rem;min-height:36px}.input-wrapper--small .input-icon{width:16px;height:16px}.input-wrapper--small .input:has(+.input-icon--left){padding-left:2.5rem}.input-wrapper--small .input:has(+.input-icon--right){padding-right:2.5rem}.input-wrapper--medium .input{padding:.75rem 1rem;font-size:1rem;min-height:44px}.input-wrapper--medium .input-icon{width:20px;height:20px}.input-wrapper--large .input{padding:1rem 1.25rem;font-size:1.125rem;min-height:52px}.input-wrapper--large .input-icon{width:24px;height:24px}.input-wrapper--medium .input-container:has(.input-icon--left) .input{padding-left:3rem}.input-wrapper--medium .input-container:has(.input-icon--right) .input{padding-right:3rem}.input-wrapper--large .input-container:has(.input-icon--left) .input{padding-left:3.5rem}.input-wrapper--large .input-container:has(.input-icon--right) .input{padding-right:3.5rem}.input-wrapper--default .input{border-color:#e5e7eb}.input-wrapper--search .input{border-color:#d1d5db;background-color:#f9fafb}.input-wrapper--search .input:focus{background-color:#fff;border-color:#3b82f6}.input-wrapper--error .input{border-color:#ef4444}.input-wrapper--error .input:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.input-wrapper--disabled .input{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed;border-color:#d1d5db}.input-wrapper--disabled .input:focus{border-color:#d1d5db;box-shadow:none}.card{display:flex;flex-direction:column;align-items:center;height:180px;width:280px;border-radius:25px;background:#d3d3d3;overflow:hidden;transition:all .3s ease;box-shadow:#00000026 2px 3px 4px}.card:hover{transform:translateY(-4px);box-shadow:#00000040 4px 6px 12px}.info-section{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:75%;color:#fff}.left-side{display:flex;flex-direction:column;justify-content:space-around;height:100%;z-index:1;padding-left:18px}.weather{display:flex;align-items:center;justify-content:flex-start;gap:8px}.weather div{display:flex;align-items:center}.weather div:nth-child(1){width:auto;height:auto}.weather div:nth-child(2){font-size:12px;font-weight:500}.temperature{font-size:34pt;font-weight:500;line-height:.8;position:relative;display:flex;align-items:baseline;gap:4px}.temp-scale-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;font-size:12px;padding:2px 6px;cursor:pointer;transition:all .2s ease;font-weight:600}.temp-scale-btn:hover{background:#ffffff4d;transform:scale(1.05)}.range{font-size:14px;font-weight:500;opacity:.9}.right-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-around;height:100%;padding-right:18px;z-index:1}.right-side>div{display:flex;flex-direction:column;align-items:flex-end}.hour{font-size:19pt;line-height:1em;font-weight:600}.date{font-size:12px;opacity:.8}.city{font-size:14px;font-weight:600}.background-design{position:absolute;height:100%;width:100%;background:linear-gradient(135deg,#667eea,#764ba2);overflow:hidden;transition:all .3s ease}.card[data-weather=sunny-hot] .background-design{background:linear-gradient(135deg,#ff7e5f,#feb47b)}.card[data-weather=sunny-warm] .background-design{background:linear-gradient(135deg,#ffeaa7,#fab1a0)}.card[data-weather=sunny-cool] .background-design{background:linear-gradient(135deg,#74b9ff,#0984e3)}.card[data-weather=sunny-cold] .background-design{background:linear-gradient(135deg,#a29bfe,#6c5ce7)}.card[data-weather=cloudy-hot] .background-design{background:linear-gradient(135deg,#fd79a8,#e84393)}.card[data-weather=cloudy-warm] .background-design{background:linear-gradient(135deg,#fdcb6e,#e17055)}.card[data-weather=cloudy-cool] .background-design{background:linear-gradient(135deg,#81ecec,#00b894)}.card[data-weather=cloudy-cold] .background-design{background:linear-gradient(135deg,#b2bec3,#636e72)}.card[data-weather=clear] .background-design{background:linear-gradient(135deg,#74b9ff,#0984e3)}.card[data-weather=clouds] .background-design{background:linear-gradient(135deg,#a8edea,#fed6e3)}.card[data-weather=rain] .background-design{background:linear-gradient(135deg,#667eea,#764ba2)}.card[data-weather=thunderstorm] .background-design{background:linear-gradient(135deg,#2c3e50,#4a6741)}.card[data-weather=snow] .background-design{background:linear-gradient(135deg,#e6ddd4,#d5d4d0);color:#333!important}.card[data-weather=mist] .background-design{background:linear-gradient(135deg,#bdc3c7,#2c3e50)}.card[data-weather=snow],.card[data-weather=snow] .left-side,.card[data-weather=snow] .right-side,.card[data-weather=snow] .days-section button{color:#333!important}.card[data-weather=snow] .temp-scale-btn{background:#3333;border:1px solid rgba(51,51,51,.3);color:#333}.card[data-weather=snow] .circle{background-color:#3333331a}.circle{background-color:#fff3;transition:all .3s ease}.circle:nth-child(1){position:absolute;top:-80%;right:-50%;width:300px;height:300px;opacity:.3;border-radius:50%}.circle:nth-child(2){position:absolute;top:-70%;right:-30%;width:210px;height:210px;opacity:.4;border-radius:50%}.circle:nth-child(3){position:absolute;top:-35%;right:-8%;width:100px;height:100px;opacity:.6;border-radius:50%}.days-section{display:flex;align-items:center;justify-content:space-between;width:100%;height:25%;background-color:#0003;gap:2px;box-shadow:inset 0 2px 5px #0003}.days-section button{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;background-color:#0000001a;box-shadow:inset 0 2px 5px #0000001a;cursor:pointer;transition:all .2s ease;gap:2px;border:none;color:#fff}.days-section button:hover{transform:scale(.95);border-radius:10px;background-color:#ffffff1a}.days-section .day{font-size:8pt;font-weight:600;color:#fff;opacity:.8;text-transform:uppercase}.icon-weather-day{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:#fff;opacity:.9}@media(max-width:640px){.card{width:260px;height:160px}.temperature{font-size:28pt}.hour{font-size:16pt}.left-side,.right-side{padding-left:14px;padding-right:14px}}.search,.search__form{width:100%}.search__container{display:flex;flex-direction:column;gap:1.5rem;align-items:stretch;width:100%}.search__input,.search__button{width:100%}@media(max-width:768px){.search__container{gap:1.25rem}}@media(max-width:480px){.search__container{gap:1rem}}.footer-app{margin-top:3rem;padding:2rem 1rem 1rem;text-align:center;border-top:1px solid rgba(255,255,255,.1)}.footer-app__container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:600px;margin:0 auto}.footer-app__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.footer-app__text{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:#fffc;margin:0;font-weight:500}.footer-app__heart{width:16px;height:16px;color:#ef4444;animation:heartbeat 1.5s ease-in-out infinite}.footer-app__year{font-size:.875rem;color:#fff9;margin:0}.footer-app__links{display:flex;align-items:center;gap:2rem}.footer-app__link{display:flex;align-items:center;gap:.5rem;color:#ffffffb3;text-decoration:none;font-size:.875rem;font-weight:500;transition:all .2s ease;padding:.5rem 1rem;border-radius:8px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.footer-app__link:hover{color:#fff;background:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.footer-app__link--github:hover{background:#24292fcc;border-color:#f0f6fc33}.footer-app__icon{width:16px;height:16px}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@media(max-width:640px){.footer-app{margin-top:2rem;padding:1.5rem 1rem 1rem}.footer-app__links{flex-direction:column;gap:1rem}.footer-app__link{width:100%;justify-content:center}}.title-app{text-align:center;margin-bottom:0}.title-app__container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1.5rem}.title-app__icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;box-shadow:0 8px 25px #667eea4d}.title-app__cloud-icon{width:30px;height:30px;color:#fff}.title-app__content{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.title-app__title{font-size:2rem;font-weight:700;color:#fff;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.3);background:linear-gradient(135deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-app__subtitle{font-size:.875rem;color:#fffc;margin:0;font-weight:400;text-shadow:0 1px 3px rgba(0,0,0,.3)}@media(max-width:768px){.title-app__container{flex-direction:column;gap:1rem}.title-app__content{align-items:center;text-align:center}.title-app__icon{width:50px;height:50px}.title-app__cloud-icon{width:25px;height:25px}.title-app__title{font-size:1.75rem}.title-app__subtitle{font-size:.875rem}}@media(max-width:480px){.title-app__title{font-size:1.5rem}.title-app__subtitle{font-size:.8rem}}.weather-app{min-height:100vh;width:100%;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);background-attachment:fixed;display:flex;align-items:stretch;justify-content:center;padding:1rem;position:relative;overflow:hidden}.weather-app:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,119,198,.2) 0%,transparent 50%);z-index:0}.weather-app__container{position:relative;z-index:1;width:100%;max-width:1400px;display:grid;grid-template-rows:auto 1fr auto;min-height:100vh;gap:1.5rem}.weather-app__header{display:flex;justify-content:center;padding:1rem 0}.weather-app__main{display:grid;grid-template-columns:380px 1fr;gap:3rem;align-items:start;padding:0 1rem}.weather-app__sidebar{position:sticky;top:2rem}.weather-app__search-card{background:linear-gradient(135deg,#ffffff40,#ffffff1a);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:2rem;box-shadow:0 20px 40px #0000001a,0 1px 3px #0000001a,inset 0 1px #fff6;border:1px solid rgba(255,255,255,.3);transition:all .3s ease}.weather-app__search-card:hover{transform:translateY(-2px);box-shadow:0 25px 50px #00000026,0 1px 3px #0000001a,inset 0 1px #fff6}.search-card__title{font-size:1.25rem;font-weight:600;color:#fff;margin:0 0 1.5rem;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.3)}.weather-app__content{display:flex;justify-content:center;align-items:center;min-height:500px}.weather-content__wrapper{width:100%;max-width:450px}.weather-app__footer{padding:1rem 0;margin-top:auto}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.weather-app__header{animation:fadeInUp .8s ease-out}.weather-app__sidebar{animation:fadeInLeft .8s ease-out .2s both}.weather-app__content{animation:fadeInRight .8s ease-out .4s both}.weather-app__footer{animation:fadeInUp .8s ease-out .6s both}@media(max-width:1200px){.weather-app__main{grid-template-columns:320px 1fr;gap:2.5rem}.weather-app__search-card{padding:1.75rem}}@media(max-width:1024px){.weather-app__main{grid-template-columns:300px 1fr;gap:2rem;padding:0 .5rem}.weather-app__search-card{padding:1.5rem}.search-card__title{font-size:1.125rem}}@media(max-width:768px){.weather-app{padding:.5rem}.weather-app__container{gap:1rem}.weather-app__header{padding:.5rem 0}.weather-app__main{display:flex;flex-direction:column;gap:1.5rem;padding:0}.weather-app__sidebar{position:static;order:1}.weather-app__content{order:2;min-height:auto}.weather-app__search-card{padding:1.5rem}.weather-content__wrapper{max-width:none}.weather-app__sidebar,.weather-app__content{animation:fadeInUp .6s ease-out}}@media(max-width:480px){.weather-app{padding:.25rem}.weather-app__container{gap:.75rem}.weather-app__search-card{padding:1.25rem}.search-card__title{font-size:1rem;margin-bottom:1rem}}@media(max-width:360px){.weather-app__search-card{padding:1rem}}*{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;box-sizing:border-box;padding:0;margin:0}html{font-size:16px;scroll-behavior:smooth}body{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);background-attachment:fixed;min-height:100vh;line-height:1.6;color:#374151;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .8s ease-in-out}body.app-bg-sunny-hot{background:linear-gradient(135deg,#ff9a56,#ff6b35,#f7931e);background-attachment:fixed}body.app-bg-sunny-warm{background:linear-gradient(135deg,#ffeaa7,#fdcb6e,#e17055);background-attachment:fixed}body.app-bg-sunny-cool{background:linear-gradient(135deg,#74b9ff,#0984e3,#00b894);background-attachment:fixed}body.app-bg-sunny-cold{background:linear-gradient(135deg,#a29bfe,#6c5ce7,#fd79a8);background-attachment:fixed}body.app-bg-cloudy-hot{background:linear-gradient(135deg,#fd79a8,#e84393,#00b894);background-attachment:fixed}body.app-bg-cloudy-warm{background:linear-gradient(135deg,#fdcb6e,#e17055,#74b9ff);background-attachment:fixed}body.app-bg-cloudy-cool{background:linear-gradient(135deg,#81ecec,#00b894,#55a3ff);background-attachment:fixed}body.app-bg-cloudy-cold{background:linear-gradient(135deg,#b2bec3,#636e72,#2d3436);background-attachment:fixed}body.app-bg-rain{background:linear-gradient(135deg,#667eea,#764ba2,#2d3436);background-attachment:fixed}body.app-bg-thunderstorm{background:linear-gradient(135deg,#2c3e50,#4a6741,#2d3436);background-attachment:fixed}body.app-bg-snow{background:linear-gradient(135deg,#e6ddd4,#d5d4d0,#ddd6fe);background-attachment:fixed}body.app-bg-mist{background:linear-gradient(135deg,#bdc3c7,#2c3e50,#636e72);background-attachment:fixed}body.app-bg-clear,body.app-bg-default{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);background-attachment:fixed}.app{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center}.visually-hidden,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}@media(prefers-color-scheme:dark){body{background:linear-gradient(135deg,#1e3a8a,#3730a3)}}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}