/* === Повноширинний блок без горизонтального скролу === */
.magnetic-storm-widget.magnetic-storm-fullwidth {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* === Центровка картки усередині === */
.storm-inner {
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  animation: fadeIn 0.8s ease-in-out;
  box-sizing: border-box;
}

/* === Заголовок === */
.magnetic-storm-widget h3 {
  margin-top: 0;
  font-size: 1.6rem;
  color: #1c1c1c;
}

/* === Поточний рівень === */
.storm-level {
  margin: 10px auto 55px;
  padding: 15px;
  border-radius: 12px;
  max-width: 900px;
  font-size: 1.2rem;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.4s ease;
}

/* === Кольори картки === */
.storm-level.calm { background: #e8f9f0; color: #007f3b; }
.storm-level.minor { background: #fffbe6; color: #947600; }
.storm-level.moderate { background: #fff0da; color: #b86b00; }
.storm-level.strong { background: #ffe7e7; color: #b40000; }

/* === KPI текст === */
.kp-value {
  font-size: 2rem;
  font-weight: 700;
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}
.kp-text {
  font-size: 1.1rem;
  opacity: 0;
  animation: fadeInUp 1s ease 0.2s forwards;
}

/* === Графік === */
canvas {
  width: 100% !important;
  max-width: 900px;
  height: auto !important;
  margin: 0 auto;
}

/* === Підпис джерела === */
.storm-footer {
  font-size: 0.9rem;
  color: #666;
  font-weight: 600;
  margin-top: 12px;
}

/* === Анімації === */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeInUp {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

/* === Адаптивність === */
@media (max-width: 768px) {
  .kp-value { font-size: 1.6rem; }
  .magnetic-storm-widget h3 { font-size: 1.3rem; }
}

/* === Пульсуюче підсвічування активного рівня === */
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0px 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 15px 5px rgba(255,255,255,0.5); }
  100% { box-shadow: 0 0 0px 0 rgba(255,255,255,0); }
}

/* Стиль активного рядка шкали */
.kp-scale.storm-calm li.calm,
.kp-scale.storm-weak li.weak,
.kp-scale.storm-minor li.minor,
.kp-scale.storm-moderate li.moderate,
.kp-scale.storm-severe li.severe,
.kp-scale.storm-storm li.storm,
.kp-scale.storm-extreme li.extreme {
  animation: pulse-glow 2s ease-in-out infinite;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}


@keyframes pulse-glow {
  0% { box-shadow: 0 0 0px 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 15px 5px rgba(255,255,255,0.6); }
  100% { box-shadow: 0 0 0px 0 rgba(255,255,255,0); }
}

/* Підсвічування активного рівня */
.kp-scale.storm-calm li.calm,
.kp-scale.storm-weak li.weak,
.kp-scale.storm-minor li.minor,
.kp-scale.storm-moderate li.moderate,
.kp-scale.storm-severe li.severe,
.kp-scale.storm-storm li.storm,
.kp-scale.storm-extreme li.extreme {
  animation: pulse-glow 2s ease-in-out infinite;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}



/* === Шкала магнітних бур (оновлена, з примусовими стилями) === */
.kp-scale {
  margin-top: 25px !important;
  text-align: left !important;
  font-family: "Inter", system-ui, sans-serif !important;
}

.kp-scale h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  color: #222 !important;
}

.kp-scale ul {
  list-style: none !important; /* 🔥 прибирає чорні крапки */
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.kp-scale li::marker {
  content: none !important;
}

.kp-scale li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 12px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #111 !important;
  background: var(--c) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  transition: all 0.3s ease-in-out !important;
}

.kp-scale li span {
  flex: 1 !important;
  color: inherit !important;
}

.kp-scale li:last-child {
  border-bottom: none !important;
}

/* Текст білий для темних кольорів */
.kp-scale li:nth-child(n+5),
.kp-scale li:nth-child(n+5) span {
  color: #fff !important;
}

/* === Ефект пульсації для активного рядка === */
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0px 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 15px 5px rgba(255,255,255,0.6); }
  100% { box-shadow: 0 0 0px 0 rgba(255,255,255,0); }
}

.kp-scale.storm-calm li.calm,
.kp-scale.storm-weak li.weak,
.kp-scale.storm-minor li.minor,
.kp-scale.storm-moderate li.moderate,
.kp-scale.storm-severe li.severe,
.kp-scale.storm-storm li.storm,
.kp-scale.storm-extreme li.extreme {
  animation: pulse-glow 2s ease-in-out infinite !important;
  border-radius: 4px !important;
  position: relative !important;
  z-index: 1 !important;
}


/* Повне видалення будь-яких маркерів у списках */
.kp-scale ul,
.kp-scale li {
  list-style: none !important;
  background-image: none !important;
}

.kp-scale li::before,
.kp-scale li::after,
.kp-scale li::marker {
  content: '' !important;
  display: none !important;
}