.lj-meteo-widget {
  --lj-meteo-accent: #c92228;
  --lj-meteo-accent-rgb: 201,34,40;
  --lj-meteo-gradient-start: #5727ff;
  --lj-meteo-gradient-end: #cf2fff;
  --lj-meteo-text: #ffffff;
  --lj-meteo-card-bg: #ffffff;
  --lj-meteo-dark-text: #0f172a;
  --lj-meteo-width: 100%;
  --lj-meteo-height: 160px;
  --lj-meteo-padding: 10px;
  --lj-meteo-radius: 26px;
  --lj-meteo-temp-size: 52px;
  --lj-meteo-condition-size: 28px;
  --lj-meteo-city-size: 20px;
  --lj-meteo-meta-size: 14px;
  position: relative;
  width: var(--lj-meteo-width);
  max-width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.lj-meteo-widget,
.lj-meteo-widget *,
.lj-meteo-widget *::before,
.lj-meteo-widget *::after {
  box-sizing: border-box;
}

.lj-meteo-widget__surface {
  position: relative;
  width: 100%;
  height: var(--lj-meteo-height);
  display: flex;
  align-items: stretch;
  padding: var(--lj-meteo-padding);
  border-radius: var(--lj-meteo-radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 30px rgba(18, 24, 40, 0.16);
  background: linear-gradient(135deg, var(--lj-meteo-gradient-start), var(--lj-meteo-gradient-end));
  color: var(--lj-meteo-text);
}

.lj-meteo-widget.is-flat .lj-meteo-widget__surface {
  background: var(--lj-meteo-card-bg);
  color: var(--lj-meteo-dark-text);
  border-color: rgba(var(--lj-meteo-accent-rgb), 0.16);
  box-shadow: 0 10px 24px rgba(18, 24, 40, 0.08);
}

.lj-meteo-widget__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events: none;
}

.lj-meteo-widget__surface::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}

.lj-meteo-widget.is-flat .lj-meteo-widget__surface::after {
  background: radial-gradient(circle, rgba(var(--lj-meteo-accent-rgb),0.08) 0%, rgba(var(--lj-meteo-accent-rgb),0) 72%);
}

.lj-meteo-widget__label {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .18em;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(255,255,255,0.14);
  color: inherit;
  backdrop-filter: blur(8px);
}

.lj-meteo-widget.is-flat .lj-meteo-widget__label {
  background: rgba(var(--lj-meteo-accent-rgb), 0.10);
  color: var(--lj-meteo-accent);
}

.lj-meteo-widget__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.lj-meteo-widget__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.lj-meteo-widget__icon-frame {
  width: 100%;
  max-width: 126px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lj-meteo-widget__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(.84);
  transform-origin: center center;
}

.lj-meteo-widget__temp-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lj-meteo-widget__temp {
  display: inline-block;
  font-size: var(--lj-meteo-temp-size);
  line-height: .9;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: inherit;
  text-shadow: 0 3px 12px rgba(0,0,0,0.08);
  white-space: nowrap;
}

.lj-meteo-widget.is-flat .lj-meteo-widget__temp {
  color: var(--lj-meteo-accent);
  text-shadow: none;
}

.lj-meteo-widget__details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding-right: 68px;
}

.lj-meteo-widget__condition {
  font-size: var(--lj-meteo-condition-size);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.lj-meteo-widget__city {
  font-size: var(--lj-meteo-city-size);
  line-height: 1.12;
  font-weight: 700;
  opacity: .96;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.lj-meteo-widget__meta {
  font-size: var(--lj-meteo-meta-size);
  line-height: 1.2;
  font-weight: 600;
  opacity: .84;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.lj-meteo-widget__credit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  color: inherit;
  opacity: .78;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.lj-meteo-widget__credit:hover {
  opacity: 1;
}

.lj-meteo-widget.is-flat .lj-meteo-widget__credit {
  color: var(--lj-meteo-dark-text);
}

/* Icon system */
.lj-weather-icon {
  position: relative;
  display: block;
  width: 132px;
  height: 108px;
}

.lj-weather-icon__sun-core,
.lj-weather-icon__moon,
.lj-weather-icon__cloud,
.lj-weather-icon__drop,
.lj-weather-icon__bolt,
.lj-weather-icon__flake,
.lj-weather-icon__mist,
.lj-weather-icon__loading-dot,
.lj-weather-icon__star {
  position: absolute;
}

.lj-weather-icon--sun .lj-weather-icon__sun-core,
.lj-weather-icon--partly .lj-weather-icon__sun-core {
  left: 28px;
  top: 12px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7ad 0%, #ffe57b 42%, #ffc93a 100%);
  box-shadow: 0 0 24px rgba(255, 212, 84, 0.46);
  animation: lj-sun-float 4.4s ease-in-out infinite;
}

.lj-weather-icon__sun-rays {
  left: 20px;
  top: 4px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 4px dotted rgba(255, 235, 160, 0.75);
  animation: lj-spin 12s linear infinite;
}

.lj-weather-icon__moon {
  left: 30px;
  top: 14px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f9fbff 0%, #d7e4ff 62%, #aec6ff 100%);
  box-shadow: 0 0 18px rgba(215, 228, 255, 0.55);
}

.lj-weather-icon__moon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  box-shadow: -18px 0 0 0 rgba(79, 33, 171, 0.88);
}

.lj-meteo-widget.is-flat .lj-weather-icon__moon::after {
  box-shadow: -18px 0 0 0 var(--lj-meteo-card-bg);
}

.lj-weather-icon__star {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 12px rgba(255,255,255,0.65);
  animation: lj-blink 2.2s ease-in-out infinite;
}

.lj-weather-icon__star--1 { top: 18px; left: 92px; }
.lj-weather-icon__star--2 { top: 40px; left: 102px; animation-delay: .9s; }

.lj-weather-icon__cloud {
  left: 26px;
  top: 34px;
  width: 82px;
  height: 44px;
  border-radius: 28px;
  background: linear-gradient(180deg, #eaf5ff 0%, #c8e1f5 100%);
  box-shadow: 0 16px 20px rgba(17, 38, 80, 0.12);
  animation: lj-cloud-drift 5.2s ease-in-out infinite;
}

.lj-weather-icon__cloud::before,
.lj-weather-icon__cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.lj-weather-icon__cloud::before {
  width: 42px;
  height: 42px;
  left: 12px;
  top: -18px;
}

.lj-weather-icon__cloud::after {
  width: 52px;
  height: 52px;
  right: 14px;
  top: -24px;
}

.lj-weather-icon__drop {
  width: 8px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9de1ff 0%, #52b6ff 100%);
  top: 78px;
  animation: lj-rain-fall 1.1s ease-in infinite;
}

.lj-weather-icon__drop--1 { left: 44px; }
.lj-weather-icon__drop--2 { left: 64px; animation-delay: .18s; }
.lj-weather-icon__drop--3 { left: 84px; animation-delay: .36s; }

.lj-weather-icon__bolt {
  left: 62px;
  top: 64px;
  width: 16px;
  height: 30px;
  background: linear-gradient(180deg, #ffe989 0%, #ffc927 100%);
  clip-path: polygon(48% 0, 100% 0, 68% 44%, 100% 44%, 24% 100%, 42% 58%, 6% 58%);
  filter: drop-shadow(0 0 10px rgba(255, 213, 59, 0.4));
  animation: lj-bolt-flash 1.9s ease-in-out infinite;
}

.lj-weather-icon__flake {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.95);
  top: 80px;
  animation: lj-snow-fall 2.2s linear infinite;
}

.lj-weather-icon__flake--1 { left: 44px; }
.lj-weather-icon__flake--2 { left: 66px; animation-delay: .4s; }
.lj-weather-icon__flake--3 { left: 88px; animation-delay: .8s; }

.lj-weather-icon__mist {
  left: 24px;
  top: 34px;
  width: 84px;
  height: 10px;
  border-radius: 999px;
  background: rgba(233, 246, 255, 0.82);
  animation: lj-mist-shift 3.6s ease-in-out infinite;
}

.lj-weather-icon__mist--2 { top: 54px; width: 92px; }
.lj-weather-icon__mist--3 { top: 74px; width: 72px; left: 38px; }

.lj-weather-icon--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lj-weather-icon__loading-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  animation: lj-loading 1s ease-in-out infinite;
}

.lj-weather-icon__loading-dot:nth-child(2) { animation-delay: .15s; }
.lj-weather-icon__loading-dot:nth-child(3) { animation-delay: .3s; }

@keyframes lj-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
@keyframes lj-sun-float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }
@keyframes lj-cloud-drift { 0%,100% { transform: translateX(0);} 50% { transform: translateX(5px);} }
@keyframes lj-rain-fall { 0% { opacity:0; transform: translateY(-4px);} 25% { opacity:1;} 100% { opacity:0; transform: translateY(16px);} }
@keyframes lj-bolt-flash { 0%, 72%, 100% { opacity:.85;} 76%, 80% { opacity:1; transform: translateY(1px);} }
@keyframes lj-snow-fall { 0% { opacity:0; transform: translateY(-4px);} 20% { opacity:1;} 100% { opacity:0; transform: translateY(18px);} }
@keyframes lj-mist-shift { 0%,100% { transform: translateX(0); opacity:.82;} 50% { transform: translateX(5px); opacity:1;} }
@keyframes lj-loading { 0%, 80%, 100% { transform: scale(.75); opacity:.45;} 40% { transform: scale(1); opacity:1;} }
@keyframes lj-blink { 0%,100% { opacity:.55;} 50% { opacity:1;} }

@media (max-width: 1024px) {
  .lj-meteo-widget__main {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .lj-meteo-widget__details {
    padding-right: 56px;
  }

  .lj-meteo-widget__condition {
    font-size: clamp(20px, 2.8vw, 34px);
  }
}

@media (max-width: 767px) {
  .lj-meteo-widget__surface {
    }

  .lj-meteo-widget__main {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
  }

  .lj-meteo-widget__icon {
    transform: scale(.68);
  }

  .lj-meteo-widget__condition {
    font-size: 18px;
  }

  .lj-meteo-widget__city {
    font-size: 14px;
  }

  .lj-meteo-widget__meta {
    font-size: 12px;
  }

  .lj-meteo-widget__temp {
    font-size: clamp(28px, 12vw, 44px);
  }

  .lj-meteo-widget__details {
    padding-right: 0;
  }

  .lj-meteo-widget__credit {
    display: none;
  }
}