[data-v-3151a456]:root{--primary-color: #186489;--secondary-color: #124c70;--text-color: #f5f7f9}.skeleton-item[data-v-3151a456]{background-color:hsla(0,0%,100%,.05);border-radius:4px;position:relative;overflow:hidden;width:100%;height:100%}.skeleton-item[data-v-3151a456]::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));animation:shimmer-3151a456 1.5s infinite}@keyframes shimmer-3151a456{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
:root{--primary-color: #186489;--secondary-color: #124c70;--text-color: #f5f7f9}.toast-container{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:999;padding:12px 24px;border-radius:4px;display:flex;align-items:center;gap:8px}.toast-container--success{background-color:#163b34;border:1px solid #348353}.toast-container--info{background-color:#003a8c;border:1px solid #096dd9}.toast-container--error{background-color:#4f0d0e;border:#a7363a}.toast-message{font-size:12px;color:var(--text-color)}.toast-enter-active{animation:toast-in .5s ease-out}.toast-leave-active{animation:toast-out .3s ease-in}@keyframes toast-in{from{top:10px;opacity:0}to{top:30px;opacity:1}}@keyframes toast-out{from{opacity:1}to{opacity:0}}
[data-v-2f553931]:root{--primary-color: #186489;--secondary-color: #124c70;--text-color: #f5f7f9}.header-container[data-v-2f553931]{display:flex;align-items:center;gap:20px;width:100%;height:100%;padding:0 min(15vw,200px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);font-size:16px;color:var(--text-color);background-color:var(--primary-color)}.skeleton-header[data-v-2f553931]{display:flex;align-items:center;gap:20px;width:100%}.add-btn[data-v-2f553931]{margin-left:auto;transition:transform .2s;color:var(--text-color)}.add-btn[data-v-2f553931]:hover{transform:scale(1.1)}@media(max-width: 768px){.header-container[data-v-2f553931]{gap:10px;padding-left:20px;padding-right:20px}}
[data-v-22a28c34]:root{--primary-color: #186489;--secondary-color: #124c70;--text-color: #f5f7f9}.app-container[data-v-22a28c34]{display:flex;flex-direction:column;width:100%;height:100%;min-height:100vh;background-color:var(--primary-color)}header[data-v-22a28c34]{position:fixed;left:0;top:0;width:100%;height:80px;flex-shrink:0;z-index:2}.router-container[data-v-22a28c34]{width:100%;height:100%;padding:80px min(15vw,200px) 10px min(15vw,200px)}@media(max-width: 768px){.router-container[data-v-22a28c34]{padding-left:20px;padding-right:20px}}
[data-v-5c4a78de]:root{--primary-color: #186489;--secondary-color: #124c70;--text-color: #f5f7f9}.chart-container[data-v-5c4a78de]{width:100%;height:400px;padding:10px;background-color:var(--secondary-color);border-radius:10px;display:flex;flex-direction:column}.chart-header[data-v-5c4a78de]{display:flex;justify-content:space-around;text-align:center;padding-bottom:10px}.header-item[data-v-5c4a78de]{flex:1;display:flex;flex-direction:column;gap:5px;align-items:center}.header-item p[data-v-5c4a78de]{margin:2px 0}.chart-body[data-v-5c4a78de]{width:100%;height:200px}.skeleton-chart[data-v-5c4a78de]{display:flex;flex-direction:column;width:100%;height:100%}.skeleton-header[data-v-5c4a78de]{display:flex;justify-content:space-around;padding-bottom:10px}.skeleton-header-item[data-v-5c4a78de]{flex:1;display:flex;flex-direction:column;align-items:center}.skeleton-body[data-v-5c4a78de]{width:100%;height:200px}
[data-v-80046914]:root{--primary-color: #186489;--secondary-color: #124c70;--text-color: #f5f7f9}.home-container[data-v-80046914]{width:100%;height:100%;padding-top:20px;color:var(--text-color)}.search-container[data-v-80046914]{position:relative;justify-content:center;align-items:center;margin-bottom:40px}.search-input[data-v-80046914]{width:100%;padding:10px 15px;border-radius:8px;border:1px solid hsla(0,0%,100%,.3);background-color:hsla(0,0%,100%,.15);color:var(--text-color);font-size:16px;outline:none;transition:border-color .3s;text-align:center}.search-input[data-v-80046914]::placeholder{color:hsla(0,0%,100%,.5)}.search-input[data-v-80046914]:focus{border-color:var(--primary-color)}.popper[data-v-80046914]{position:absolute;top:110%;left:0;right:0;background-color:var(--secondary-color);border-radius:8px;border:1px solid hsla(0,0%,100%,.2);z-index:10;max-height:300px;overflow-y:auto}.popper-item[data-v-80046914]{padding:12px 15px;transition:background-color .2s}.popper-item[data-v-80046914]:hover{background-color:var(--primary-color)}.popper-item[data-v-80046914]:not(:last-child){border-bottom:1px solid hsla(0,0%,100%,.1)}.weather-info p[data-v-80046914]{font-size:20px;margin-bottom:10px}.chart-container[data-v-80046914]{width:100%;padding:10px;background-color:var(--secondary-color);border-radius:10px}.favorites-container[data-v-80046914]{margin-bottom:30px;display:flex;flex-direction:column;gap:10px;max-height:30vh;overflow:auto}.favorite-item[data-v-80046914]{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background-color:var(--secondary-color);border-radius:8px;border:1px solid hsla(0,0%,100%,.1);transition:transform .2s}.favorite-item[data-v-80046914]:hover{transform:translateY(-2px);border-color:hsla(0,0%,100%,.3)}.favorite-item .city-name[data-v-80046914]{font-size:18px;font-weight:500}.favorite-item .actions[data-v-80046914]{display:flex;gap:10px}.favorite-item .actions button[data-v-80046914]{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:opacity .2s}.favorite-item .actions button[data-v-80046914]:hover{opacity:.9}.favorite-item .actions .view-btn[data-v-80046914]{background-color:var(--primary-color);color:#fff}.favorite-item .actions .delete-btn[data-v-80046914]{background-color:hsla(0,0%,100%,.1);color:var(--text-color)}.favorite-item .actions .delete-btn[data-v-80046914]:hover{background-color:rgba(255,0,0,.3)}
@keyframes ashFloat {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.5;
  }

  25% {
    transform: translateY(-3px) translateX(2px);
    opacity: 0.7;
  }

  50% {
    transform: translateY(-5px) translateX(-2px);
    opacity: 1;
  }

  75% {
    transform: translateY(-3px) translateX(1px);
    opacity: 0.7;
  }
}

.ash-particle {
  animation: ashFloat 3.5s ease-in-out infinite;
}

.ash-particle:nth-of-type(1) {
  animation-delay: 0s;
}

.ash-particle:nth-of-type(2) {
  animation-delay: 0.4s;
}

.ash-particle:nth-of-type(3) {
  animation-delay: 0.8s;
}

.ash-particle:nth-of-type(4) {
  animation-delay: 1.2s;
}

.ash-particle:nth-of-type(5) {
  animation-delay: 1.6s;
}

.ash-particle:nth-of-type(6) {
  animation-delay: 2s;
}

.ash-particle:nth-of-type(7) {
  animation-delay: 2.4s;
}

.ash-particle:nth-of-type(8) {
  animation-delay: 2.8s;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveRight {
  0%,
  100% {
    transform: translateX(-40px);
  }

  50% {
    transform: translateX(80px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

.wind-line {
  animation: moveRight 3s ease-in-out infinite;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveRight {
  0%,
  100% {
    transform: translateX(-40px);
  }

  50% {
    transform: translateX(80px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

.cloudy-sun-rays {
  animation: rotate360 25s linear infinite;
  transform-origin: 695.5px 333.4px;
}

.cloudy-cloud {
  animation: moveRight 4s ease-in-out infinite;
}

@keyframes coldShiver {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }

  33% {
    transform: translate(-1px, 0px) scale(0.9);
    opacity: 0.5;
  }

  66% {
    transform: translate(-1px, 0px) scale(1.1);
    opacity: 1;
  }
}

.cold-snowflake {
  animation: coldShiver 10s ease-in-out infinite;
  transform-origin: 512px 512px;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveRight {
  0%,
  100% {
    transform: translateX(-40px);
  }

  50% {
    transform: translateX(80px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes dustSwirl {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }

  25% {
    transform: translate(3px, -2px) rotate(90deg);
    opacity: 0.8;
  }

  50% {
    transform: translate(5px, 2px) rotate(180deg);
    opacity: 1;
  }

  75% {
    transform: translate(2px, -3px) rotate(270deg);
    opacity: 0.8;
  }
}

.dust-particle {
  animation: dustSwirl 4s ease-in-out infinite;
}

.dust-particle:nth-of-type(1) {
  animation-delay: 0s;
}

.dust-particle:nth-of-type(2) {
  animation-delay: 0.5s;
}

.dust-particle:nth-of-type(3) {
  animation-delay: 1s;
}

.dust-particle:nth-of-type(4) {
  animation-delay: 1.5s;
}

.dust-wind {
  animation: moveRight 5s ease-in-out infinite;
}

.dust-wind:nth-of-type(1) {
  animation-delay: 0s;
}

.dust-wind:nth-of-type(2) {
  animation-delay: 0.4s;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveRight {
  0%,
  100% {
    transform: translateX(-40px);
  }

  50% {
    transform: translateX(80px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes fogFade {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.8;
  }
}

.fog-layer {
  animation:
    fogFade 4s ease-in-out infinite,
    moveRight 5s ease-in-out infinite;
}

@keyframes rainDropHeavy {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }

  100% {
    transform: translateY(30px) scaleY(1.5);
    opacity: 0;
  }
}

@keyframes cloudFloat {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.4;
  }

  50% {
    transform: translateX(40px);
    opacity: 0.8;
  }
}

.heavy-rain-drop {
  animation: rainDropHeavy 1s ease-in infinite;
}

.heavy-rain-drop:nth-of-type(1) {
  animation-delay: 0s;
}

.heavy-rain-drop:nth-of-type(2) {
  animation-delay: 0.1s;
}

.heavy-rain-drop:nth-of-type(3) {
  animation-delay: 0.2s;
}

.heavy-rain-drop:nth-of-type(4) {
  animation-delay: 0.3s;
}

.heavy-rain-drop:nth-of-type(5) {
  animation-delay: 0.4s;
}

.heavy-rain-drop:nth-of-type(6) {
  animation-delay: 0.5s;
}

.rain-cloud {
  animation: cloudFloat 5s ease-in-out infinite;
}

@keyframes heavySnowFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(10px) rotate(360deg);
    opacity: 0.2;
  }
}

.heavy-snow {
  animation: heavySnowFall 2.5s ease-in infinite;
}

.heavy-snow:nth-of-type(1) {
  animation-delay: 0s;
}

.heavy-snow:nth-of-type(2) {
  animation-delay: 0.5s;
}

.heavy-snow:nth-of-type(3) {
  animation-delay: 1s;
}

.heavy-snow:nth-of-type(4) {
  animation-delay: 1.5s;
}

.heavy-snow:nth-of-type(5) {
  animation-delay: 2s;
}

.heavy-snow:nth-of-type(6) {
  animation-delay: 0.5s;
}

.heavy-snow:nth-of-type(7) {
  animation-delay: 2.5s;
}

.heavy-snow:nth-of-type(8) {
  animation-delay: 4.5s;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveRight {
  0%,
  100% {
    transform: translateX(-40px);
  }

  50% {
    transform: translateX(80px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes sunRiseSet {
  0% {
    transform: translateY(150px);
    opacity: 0;
  }

  25% {
    transform: translateY(0);
    opacity: 1;
  }

  75% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(150px);
    opacity: 0;
  }
}

.sun-group--home {
  animation: sunRiseSet 3s ease-in-out infinite;
  transform-origin: center;
}

.sun-rays--home {
  animation: rotate360 6s linear infinite;
  transform-origin: 628.363636px 395.636364px;
}

@keyframes iceRainFall {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateY(250px) translateX(-8px);
    opacity: 0.3;
  }
}

.ice-rain {
  animation: iceRainFall 2s ease-in infinite;
}

.ice-rain:nth-of-type(1) {
  animation-delay: 0s;
}

.ice-rain:nth-of-type(2) {
  animation-delay: 0.4s;
}

.ice-rain:nth-of-type(3) {
  animation-delay: 0.8s;
}

.ice-rain:nth-of-type(4) {
  animation-delay: 1.2s;
}

@keyframes rainDrop {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateY(40px) scaleY(1.2);
    opacity: 0;
  }
}

.light-rain-drop1 {
  animation: rainDrop 5s ease-in infinite;
}

.light-rain-drop2 {
  animation: rainDrop 5s ease-in infinite 1s;
}

.light-rain-drop3 {
  animation: rainDrop 5s ease-in infinite 2.5s;
}

@keyframes snowFall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(30px);
    opacity: 0.3;
  }
}

.snow-flake {
  animation: snowFall 3s ease-in infinite;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveRight {
  0%,
  100% {
    transform: translateX(-40px);
  }

  50% {
    transform: translateX(80px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes rainDropMedium {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateY(25px) scaleY(1.3);
    opacity: 0;
  }
}

.rain-drop {
  animation: rainDropMedium 2s ease-in infinite;
}

.rain-drop:nth-of-type(1) {
  animation-delay: 0s;
}

.rain-drop:nth-of-type(2) {
  animation-delay: 0.2s;
}

.rain-drop:nth-of-type(3) {
  animation-delay: 0.4s;
}

.rain-drop:nth-of-type(4) {
  animation-delay: 0.6s;
}

.rain-cloud {
  animation: moveRight 3s ease-in-out infinite;
}

@keyframes showerDrop {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(25px) scaleY(1.3);
    opacity: 0;
  }
}

.shower-drop {
  animation: showerDrop 4s ease-in infinite;
}

.shower-drop:nth-of-type(1) {
  animation-delay: 0s;
}

.shower-drop:nth-of-type(2) {
  animation-delay: 2s;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveRight {
  0%,
  100% {
    transform: translateX(-40px);
  }

  50% {
    transform: translateX(80px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

.strong-wind-line {
  animation: moveRight 2s ease-in-out infinite;
}

.strong-wind-line:nth-child(2) {
  animation-delay: 0.5s;
}

@keyframes rainDrop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(200px);
    opacity: 0;
  }
}

@keyframes lightning {
  0%,
  45%,
  55%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.thunder-drop {
  animation: rainDrop 2s ease-in infinite;
}

.thunder-drop:nth-of-type(1) {
  animation-delay: 0s;
}

.thunder-drop:nth-of-type(2) {
  animation-delay: 0.5s;
}

.thunder-drop:nth-of-type(3) {
  animation-delay: 1s;
}

.thunder-lightning {
  animation: lightning 1.5s ease-in-out infinite;
}

@keyframes typhoonSpin {
  0% {
    transform: rotate(0deg);
    scale: 0.5;
  }

  50% {
    transform: rotate(180deg);
    scale: 1;
  }

  100% {
    transform: rotate(360deg);
    scale: 0.5;
  }
}

@keyframes typhoonPulse {
  0%,
  100% {
    transform: scale(0.5);
  }

  50% {
    transform: scale(1);
  }
}

.typhoon-rotate {
  animation: typhoonSpin 30s linear infinite;
  transform-origin: 519px 509px;
}

.typhoon-shape {
  animation: typhoonPulse 30s ease-in-out infinite;
  transform-origin: 519px 509px;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveRight {
  0%,
  100% {
    transform: translateX(-40px);
  }

  50% {
    transform: translateX(80px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(100px);
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

.sun-rays {
  animation: rotate360 20s linear infinite;
  transform-origin: 511.3px 513.2px;
}



:root{--primary-color: #186489;--secondary-color: #124c70;--text-color: #f5f7f9}@font-face{font-family:"Consolas";src:url(/fonts/consolas-d6337fc9.woff2) format("woff2")}@font-face{font-family:"LXGW";src:url(/fonts/lxgwscreen-35fde1d4.woff2) format("woff2")}*{margin:0;padding:0;box-sizing:border-box;font-family:"Consolas","LXGW"}*::-webkit-scrollbar{display:none}html,body{width:100vw}.cursor-pointer{cursor:pointer}