/* Weather360 mobile hero overrides. Loaded after main.css. */
.w360-hero:not(.is-compact) .w360-hero-stats {
  gap: 4px !important;
  border-top: 1px solid rgba(255,255,255,.24) !important;
}

.w360-hero:not(.is-compact) .w360-hero-stats div,
.w360-hero:not(.is-compact) .w360-hero-stats div + div,
.w360-hero:not(.is-compact) .w360-hero-stats div:last-child {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  min-width: 0 !important;
  min-height: 86px !important;
  padding: 10px 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.12) !important;
  text-align: center !important;
  backdrop-filter: blur(5px);
}

.w360-hero:not(.is-compact) .w360-hero-stats i {
  display: inline-flex !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  opacity: .92 !important;
  visibility: visible !important;
}

.w360-hero:not(.is-compact) .w360-hero-stats div:nth-child(6) i {
  visibility: visible !important;
}

.w360-hero:not(.is-compact) .w360-hero-stats span {
  display: block !important;
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  opacity: .9 !important;
  white-space: normal !important;
}

.w360-hero:not(.is-compact) .w360-hero-stats strong {
  display: block !important;
  margin-top: 5px !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
}

.w360-map-panel {
  overflow: hidden !important;
}

.w360-map-tabs {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  overflow: visible !important;
}

.w360-map-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #f7fbff !important;
  color: #071948 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  box-shadow: none !important;
}

.w360-map-tabs button:hover {
  border-color: rgba(15,111,255,.24) !important;
  background: #eef5ff !important;
  color: #0f6fff !important;
}

.w360-map-tabs button.active {
  border-color: #0f6fff !important;
  background: #0f6fff !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15,111,255,.2) !important;
}

.w360-map-tabs i {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.w360-map.home-radar {
  width: 100% !important;
  height: 292px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: 8px !important;
}

.w360-map.home-radar .w360-map-toolbar {
  right: 12px !important;
  top: 12px !important;
  z-index: 9 !important;
}

.w360-map.home-radar .w360-map-toolbar button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 7px !important;
}

.w360-map.home-radar .w360-map-legend {
  left: 86px !important;
  right: 80px !important;
  bottom: 18px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}

.w360-map.home-radar .w360-map-legend i {
  min-width: 0 !important;
  height: 10px !important;
  margin: 0 !important;
}

.w360-map.home-radar .w360-map-legend span {
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.w360-map-player,
.w360-home-split .w360-map-player {
  display: grid !important;
  grid-template-columns: 42px auto minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: calc(100% - 116px) !important;
  max-width: 560px !important;
  min-width: 0 !important;
  margin: -50px 86px 0 14px !important;
  position: relative !important;
  z-index: 10 !important;
}

.w360-map-player button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  box-shadow: 0 8px 18px rgba(7,25,72,.16) !important;
}

.w360-map-player span {
  padding: 7px 13px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(7,25,72,.12) !important;
}

.w360-map-player i {
  min-width: 0 !important;
  width: 100% !important;
  height: 12px !important;
}

.w360-map-player small {
  min-width: 34px !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.w360-map-player .w360-map-max-label {
  min-width: 42px !important;
}

@media (max-width: 1100px) {
  .w360-map-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .w360-map-panel {
    padding: 14px !important;
    overflow: hidden !important;
  }

  .w360-map-panel .w360-panel-head {
    margin-bottom: 10px !important;
  }

  .w360-map-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    overflow: visible !important;
  }

  .w360-map-tabs button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  .w360-map-tabs i {
    margin-right: 5px !important;
  }

  .w360-map.home-radar {
    width: 100% !important;
    height: clamp(250px, 62vw, 330px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 8px !important;
  }

  .w360-map.home-radar .w360-map-toolbar {
    right: 10px !important;
    top: 10px !important;
    gap: 6px !important;
    z-index: 9 !important;
  }

  .w360-map.home-radar .w360-map-toolbar button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 7px !important;
  }

  .w360-map.home-radar .w360-map-shape {
    inset: 22px 20% 34px 24% !important;
  }

  .w360-map.home-radar .w360-map-pin {
    max-width: 86px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .w360-map.home-radar .w360-map-legend {
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
    border-radius: 999px !important;
  }

  .w360-map.home-radar .w360-map-legend i {
    min-width: 0 !important;
    height: 10px !important;
    margin: 0 !important;
  }

  .w360-map.home-radar .w360-map-legend span {
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .w360-map-player,
  .w360-home-split .w360-map-player {
    display: grid !important;
    grid-template-columns: 38px auto minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 10px 0 0 !important;
    padding: 8px !important;
    border: 1px solid #dce6f7 !important;
    border-radius: 8px !important;
    background: #f7fbff !important;
  }

  .w360-map-player button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .w360-map-player span {
    padding: 6px 10px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .w360-map-player i {
    min-width: 0 !important;
    width: 100% !important;
    height: 10px !important;
  }

  .w360-map-player small {
    min-width: 0 !important;
    color: #52647f !important;
    text-shadow: none !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .w360-map-player .w360-map-max-label {
    min-width: 32px !important;
  }

  .w360-hero:not(.is-compact) {
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-content {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 12px 10px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top > div {
    min-width: 0 !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top h1 {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    min-width: 0 !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .w360-hero:not(.is-compact) .w360-title-favorite {
    flex: 0 0 auto !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin-left: 2px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }

  .w360-hero:not(.is-compact) .w360-current-location-btn {
    position: static !important;
    justify-self: end !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 15px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top p {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 14px 0 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top p span {
    justify-self: start !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .w360-hero-updated-prefix {
    display: none !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 118px !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 14px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big {
    margin-top: 0 !important;
    font-size: 62px !important;
    line-height: .9 !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big sup {
    font-size: 21px !important;
    top: -.85em !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main h3 {
    margin: 8px 0 0 !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main p {
    margin: 8px 0 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-icon {
    width: 112px !important;
    height: 112px !important;
    justify-self: end !important;
    align-self: center !important;
    transform: translate(0, -6px) !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats div,
  .w360-hero:not(.is-compact) .w360-hero-stats div + div,
  .w360-hero:not(.is-compact) .w360-hero-stats div:last-child {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    min-width: 0 !important;
    min-height: 90px !important;
    padding: 10px 6px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.12) !important;
    text-align: center !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats i {
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    visibility: visible !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats div:nth-child(6) i {
    visibility: visible !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats span {
    display: block !important;
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats strong {
    display: block !important;
    margin-top: 5px !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .w360-current-page-head {
    display: none !important;
  }

  .w360-current-layout,
  .w360-current-layout > main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .w360-current-hero {
    min-height: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    container-type: inline-size;
    container-name: w360-current-hero;
  }

  .w360-current-hero-inner {
    min-height: 0 !important;
    padding: 14px 12px 10px !important;
  }

  .w360-current-location-btn {
    top: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
  }

  .w360-current-hero-title {
    max-width: calc(100% - 50px) !important;
    margin: 0 0 14px !important;
    gap: 7px !important;
  }

  .w360-current-hero-title h2 {
    gap: 5px !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .w360-current-favorite {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  .w360-current-hero-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .w360-current-hero-meta span {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .w360-current-hero-meta b {
    justify-self: start !important;
    min-width: 0 !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .w360-current-hero-meta b i,
  .w360-current-updated-prefix,
  .w360-current-hero-pills {
    display: none !important;
  }

  .w360-current-hero-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 118px !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 14px !important;
  }

  .w360-current-temp {
    margin-top: 0 !important;
    font-size: 62px !important;
    line-height: .9 !important;
  }

  .w360-current-temp sup {
    font-size: 21px !important;
    top: -.85em !important;
  }

  .w360-current-hero-main h3 {
    margin: 8px 0 0 !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  .w360-current-hero-main p {
    margin: 8px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .w360-current-hero-main img {
    width: 112px !important;
    height: 112px !important;
    justify-self: end !important;
    align-self: center !important;
    transform: translate(0, -6px) !important;
  }

  .w360-current-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin-top: 14px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .w360-current-hero-stats div,
  .w360-current-hero-stats div + div,
  .w360-current-hero-stats div:last-child {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    min-width: 0 !important;
    min-height: 90px !important;
    padding: 10px 6px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.12) !important;
    text-align: center !important;
  }

  .w360-current-hero-stats i {
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    visibility: visible !important;
  }

  .w360-current-hero-stats div:nth-child(6) i {
    visibility: visible !important;
  }

  .w360-current-hero-stats span {
    display: block !important;
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  .w360-current-hero-stats strong {
    display: block !important;
    margin-top: 5px !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  .w360-map-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .w360-map.home-radar {
    height: clamp(300px, 48vw, 380px) !important;
  }

  .w360-map-player,
  .w360-home-split .w360-map-player {
    grid-template-columns: 42px auto minmax(0, 1fr) auto auto !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-content {
    padding: 18px 18px 14px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }

  .w360-hero:not(.is-compact) .w360-current-location-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top h1 {
    font-size: 22px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top p {
    grid-template-columns: minmax(0, 1fr) !important;
    font-size: 14px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main {
    grid-template-columns: minmax(0, 1fr) 132px !important;
    gap: 16px !important;
    margin-top: 16px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big {
    font-size: 70px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big sup {
    font-size: 24px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main h3 {
    font-size: 22px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main p {
    font-size: 15px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-icon {
    width: 126px !important;
    height: 126px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats div,
  .w360-hero:not(.is-compact) .w360-hero-stats div + div,
  .w360-hero:not(.is-compact) .w360-hero-stats div:last-child {
    min-height: 86px !important;
    padding: 10px 8px !important;
  }
}

@media (max-width: 375px) {
  .w360-map-tabs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .w360-map.home-radar {
    height: 235px !important;
  }

  .w360-map.home-radar .w360-map-toolbar button {
    width: 30px !important;
    height: 30px !important;
  }

  .w360-map.home-radar .w360-map-pin {
    font-size: 9px !important;
    padding: 3px 6px !important;
  }

  .w360-map.home-radar .w360-map-legend {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 7px 8px !important;
  }

  .w360-map-player,
  .w360-home-split .w360-map-player {
    grid-template-columns: 36px auto minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  .w360-map-player .w360-map-max-label {
    display: none !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-content {
    padding: 12px 10px 9px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top {
    grid-template-columns: minmax(0, 1fr) 38px !important;
  }

  .w360-hero:not(.is-compact) .w360-current-location-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top h1 {
    font-size: 18px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top p {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    margin-top: 12px !important;
    font-size: 12px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top p span {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main {
    grid-template-columns: minmax(0, 1fr) 98px !important;
    margin-top: 14px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big {
    font-size: 56px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big sup {
    font-size: 19px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main h3 {
    font-size: 18px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main p {
    font-size: 14px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-icon {
    width: 96px !important;
    height: 96px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats div,
  .w360-hero:not(.is-compact) .w360-hero-stats div + div,
  .w360-hero:not(.is-compact) .w360-hero-stats div:last-child {
    min-height: 80px !important;
    padding: 9px 5px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats span {
    font-size: 10px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats strong {
    font-size: 16px !important;
  }

  .w360-current-hero-inner {
    padding: 12px 10px 9px !important;
  }

  .w360-current-location-btn {
    width: 38px !important;
    height: 38px !important;
  }

  .w360-current-hero-title {
    margin-bottom: 12px !important;
  }

  .w360-current-hero-title h2 {
    font-size: 18px !important;
  }

  .w360-current-hero-meta {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  .w360-current-hero-meta b {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }

  .w360-current-hero-main {
    grid-template-columns: minmax(0, 1fr) 98px !important;
    margin-top: 14px !important;
  }

  .w360-current-temp {
    font-size: 56px !important;
  }

  .w360-current-temp sup {
    font-size: 19px !important;
  }

  .w360-current-hero-main h3 {
    font-size: 18px !important;
  }

  .w360-current-hero-main p {
    font-size: 14px !important;
  }

  .w360-current-hero-main img {
    width: 96px !important;
    height: 96px !important;
  }

  .w360-current-hero-stats div,
  .w360-current-hero-stats div + div,
  .w360-current-hero-stats div:last-child {
    min-height: 80px !important;
    padding: 9px 5px !important;
  }

  .w360-current-hero-stats span {
    font-size: 10px !important;
  }

  .w360-current-hero-stats strong {
    font-size: 16px !important;
  }
}

@media (max-width: 340px) {
  .w360-map-panel {
    padding: 12px !important;
  }

  .w360-map.home-radar {
    height: 220px !important;
  }

  .w360-map.home-radar .w360-map-legend span:first-of-type {
    display: none !important;
  }

  .w360-map-player,
  .w360-home-split .w360-map-player {
    grid-template-columns: 34px auto minmax(0, 1fr) !important;
  }

  .w360-map-player button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .w360-map-player small:not(.w360-map-max-label) {
    display: none !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-content {
    padding: 11px 9px 9px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 6px !important;
  }

  .w360-hero:not(.is-compact) .w360-current-location-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 13px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top h1 {
    font-size: 16px !important;
  }

  .w360-hero:not(.is-compact) .w360-title-favorite {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top p {
    gap: 6px !important;
    font-size: 11px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-top p span {
    padding: 6px 7px !important;
    font-size: 10px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big {
    font-size: 50px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big sup {
    font-size: 17px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main h3 {
    margin-top: 6px !important;
    font-size: 16px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-main p {
    margin-top: 6px !important;
    font-size: 12px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-icon {
    width: 80px !important;
    height: 80px !important;
    transform: translate(0, -4px) !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats div,
  .w360-hero:not(.is-compact) .w360-hero-stats div + div,
  .w360-hero:not(.is-compact) .w360-hero-stats div:last-child {
    min-height: 74px !important;
    padding: 8px 4px !important;
    border-radius: 7px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats i {
    font-size: 15px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats span {
    font-size: 9px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats strong {
    font-size: 14px !important;
  }

  .w360-current-hero-inner {
    padding: 11px 9px 9px !important;
  }

  .w360-current-location-btn {
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }

  .w360-current-hero-title {
    max-width: calc(100% - 42px) !important;
    margin-bottom: 11px !important;
  }

  .w360-current-hero-title h2 {
    font-size: 16px !important;
  }

  .w360-current-favorite {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }

  .w360-current-hero-meta {
    gap: 6px !important;
    font-size: 11px !important;
  }

  .w360-current-hero-meta b {
    padding: 6px 7px !important;
    font-size: 10px !important;
  }

  .w360-current-hero-main {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .w360-current-temp {
    font-size: 50px !important;
  }

  .w360-current-temp sup {
    font-size: 17px !important;
  }

  .w360-current-hero-main h3 {
    margin-top: 6px !important;
    font-size: 16px !important;
  }

  .w360-current-hero-main p {
    margin-top: 6px !important;
    font-size: 12px !important;
  }

  .w360-current-hero-main img {
    width: 80px !important;
    height: 80px !important;
    transform: translate(0, -4px) !important;
  }

  .w360-current-hero-stats div,
  .w360-current-hero-stats div + div,
  .w360-current-hero-stats div:last-child {
    min-height: 74px !important;
    padding: 8px 4px !important;
    border-radius: 7px !important;
  }

  .w360-current-hero-stats i {
    font-size: 15px !important;
  }

  .w360-current-hero-stats span {
    font-size: 9px !important;
  }

  .w360-current-hero-stats strong {
    font-size: 14px !important;
  }
}

@media (max-width: 300px) {
  .w360-hero:not(.is-compact) .w360-hero-main {
    grid-template-columns: minmax(0, 1fr) 68px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big {
    font-size: 44px !important;
  }

  .w360-hero:not(.is-compact) .w360-temp-big sup {
    font-size: 15px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-icon {
    width: 66px !important;
    height: 66px !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .w360-hero:not(.is-compact) .w360-hero-stats div,
  .w360-hero:not(.is-compact) .w360-hero-stats div + div,
  .w360-hero:not(.is-compact) .w360-hero-stats div:last-child {
    min-height: 68px !important;
  }

  .w360-current-hero-main {
    grid-template-columns: minmax(0, 1fr) 68px !important;
  }

  .w360-current-temp {
    font-size: 44px !important;
  }

  .w360-current-temp sup {
    font-size: 15px !important;
  }

  .w360-current-hero-main img {
    width: 66px !important;
    height: 66px !important;
  }

  .w360-current-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .w360-current-hero-stats div,
  .w360-current-hero-stats div + div,
  .w360-current-hero-stats div:last-child {
    min-height: 68px !important;
  }
}

@media (max-width: 767px) {
  .w360-home-alert-panel,
  .w360-current-alert-panel {
    padding: 14px !important;
    overflow: hidden !important;
  }

  .w360-home-alert-panel .w360-panel-head,
  .w360-current-alert-panel .w360-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .w360-home-alert-panel .w360-panel-head h2,
  .w360-current-alert-panel .w360-panel-head h2 {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .w360-home-alert-panel .w360-panel-head a,
  .w360-current-alert-panel .w360-panel-head a {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .w360-home-alert-panel .w360-alert-stack,
  .w360-current-alert-panel .w360-alert-stack {
    display: grid !important;
    gap: 10px !important;
  }

  .w360-home-alert-panel .w360-alert-stack-card,
  .w360-home-alert-panel .w360-alert-stack > div,
  .w360-current-alert-panel .w360-alert-stack-card,
  .w360-current-alert-panel .w360-alert-stack > div,
  .w360-right-rail .w360-alert-stack > div,
  .w360-region-alert-panel .w360-alert-stack > div {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon title"
      "icon level"
      "text text" !important;
    align-items: start !important;
    gap: 6px 10px !important;
    min-height: 0 !important;
    padding: 12px 12px 12px 14px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .w360-home-alert-panel .w360-alert-stack-card:before,
  .w360-current-alert-panel .w360-alert-stack-card:before {
    top: 12px !important;
    bottom: 12px !important;
    width: 3px !important;
  }

  .w360-home-alert-panel .w360-alert-stack-card .w360-alert-stack-icon,
  .w360-current-alert-panel .w360-alert-stack-card .w360-alert-stack-icon,
  .w360-home-alert-panel .w360-alert-stack > div > i,
  .w360-current-alert-panel .w360-alert-stack > div > i,
  .w360-right-rail .w360-alert-stack > div > i,
  .w360-region-alert-panel .w360-alert-stack > div > i {
    grid-area: icon !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 17px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .w360-home-alert-panel .w360-alert-stack-card > strong,
  .w360-current-alert-panel .w360-alert-stack-card > strong,
  .w360-home-alert-panel .w360-alert-stack > div > strong,
  .w360-current-alert-panel .w360-alert-stack > div > strong,
  .w360-right-rail .w360-alert-stack > div > strong,
  .w360-region-alert-panel .w360-alert-stack > div > strong {
    grid-area: title !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: var(--w360-text) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  .w360-home-alert-panel .w360-alert-stack-card .w360-alert-stack-level,
  .w360-current-alert-panel .w360-alert-stack-card .w360-alert-stack-level,
  .w360-home-alert-panel .w360-alert-stack > div > span:not(.w360-alert-stack-icon),
  .w360-current-alert-panel .w360-alert-stack > div > span:not(.w360-alert-stack-icon),
  .w360-right-rail .w360-alert-stack > div > span:not(.w360-alert-stack-icon),
  .w360-region-alert-panel .w360-alert-stack > div > span:not(.w360-alert-stack-icon) {
    grid-area: level !important;
    justify-self: start !important;
    align-self: start !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .w360-home-alert-panel .w360-alert-stack-card > p,
  .w360-current-alert-panel .w360-alert-stack-card > p,
  .w360-home-alert-panel .w360-alert-stack > div > p,
  .w360-current-alert-panel .w360-alert-stack > div > p,
  .w360-right-rail .w360-alert-stack > div > p,
  .w360-region-alert-panel .w360-alert-stack > div > p {
    grid-area: text !important;
    grid-column: 1 / -1 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    color: #52647f !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }
}

/* Weather map redesign: stable tabs and non-overlapping player. */
.w360-map-panel .w360-map-tabs {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.w360-map-panel .w360-map-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 9px 8px !important;
  border: 1px solid #eef3fb !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  color: #071948 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center !important;
  box-shadow: none !important;
}

.w360-map-panel .w360-map-tabs button.active {
  border-color: #0f6fff !important;
  background: #0f6fff !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15,111,255,.2) !important;
}

.w360-map-panel .w360-map-tabs button:not(.active):hover {
  border-color: rgba(15,111,255,.28) !important;
  background: #eef5ff !important;
  color: #0f6fff !important;
}

.w360-map-panel .w360-map-tabs i {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.w360-map-panel .w360-map.home-radar {
  width: 100% !important;
  height: clamp(300px, 34vw, 380px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: 8px !important;
}

.w360-map-panel .w360-map.home-radar .w360-map-toolbar {
  right: 12px !important;
  top: 12px !important;
  z-index: 9 !important;
}

.w360-map-panel .w360-map.home-radar .w360-map-toolbar button {
  width: 34px !important;
  height: 34px !important;
}

.w360-map-panel .w360-map.home-radar .w360-map-legend {
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
}

.w360-map-panel .w360-map.home-radar .w360-map-legend i {
  min-width: 0 !important;
  height: 10px !important;
  margin: 0 !important;
}

.w360-map-panel .w360-map.home-radar .w360-map-legend span {
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.w360-map-panel .w360-map.home-radar .w360-map-legend {
  display: none !important;
}

.w360-map-panel .w360-map-player,
.w360-home-split .w360-map-player {
  display: grid !important;
  grid-template-columns: 42px auto minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 10px 0 0 !important;
  padding: 8px !important;
  position: relative !important;
  z-index: 3 !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: #f7fbff !important;
}

.w360-map-panel .w360-map-player button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}

.w360-map-panel .w360-map-player span {
  padding: 7px 13px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(7,25,72,.08) !important;
}

.w360-map-panel .w360-map-player i {
  min-width: 0 !important;
  width: 100% !important;
  height: 12px !important;
}

.w360-map-panel .w360-map-player small {
  min-width: 0 !important;
  color: #52647f !important;
  text-shadow: none !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.w360-map-info {
  display: grid !important;
  grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: #f7fbff !important;
}

.w360-map-info > div:first-child {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.w360-map-info strong {
  color: #52647f !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.w360-map-info span {
  color: #071948 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

.w360-map-scale {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}

.w360-map-scale i {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#bde7ff,#5eead4,#facc15,#f97316,#7c3aed) !important;
}

.w360-map-scale small,
.w360-map-info em {
  color: #52647f !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  .w360-map-panel .w360-map-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .w360-map-panel .w360-map-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 6px !important;
    margin-bottom: 10px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  .w360-map-panel .w360-map-tabs button {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  .w360-map-panel .w360-map.home-radar {
    height: clamp(245px, 62vw, 330px) !important;
  }

  .w360-map-panel .w360-map-player,
  .w360-home-split .w360-map-player {
    grid-template-columns: 38px auto minmax(0, 1fr) auto auto !important;
  }

  .w360-map-info {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .w360-map-panel .w360-map-player button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}

@media (max-width: 375px) {
  .w360-map-panel .w360-map-tabs button {
    flex-basis: 108px !important;
    width: 108px !important;
  }

  .w360-map-panel .w360-map-player,
  .w360-home-split .w360-map-player {
    grid-template-columns: 36px auto minmax(0, 1fr) auto !important;
  }

  .w360-map-panel .w360-map-player .w360-map-max-label {
    display: none !important;
  }

  .w360-map-info {
    padding: 9px 10px !important;
  }
}

@media (max-width: 340px) {
  .w360-map-panel .w360-map-tabs button {
    flex-basis: 102px !important;
    width: 102px !important;
    font-size: 12px !important;
  }

  .w360-map-panel .w360-map-player small:not(.w360-map-max-label) {
    display: none !important;
  }

  .w360-map-scale {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .w360-map-scale small:first-child {
    display: none !important;
  }
}

/* Home map + purpose: stack sections into clear full-width rows. */
.w360-home-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

.w360-home-split > .w360-panel {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
}

.w360-home-split .w360-map-panel {
  overflow: hidden !important;
}

.w360-home-split .w360-map.home-radar {
  height: clamp(330px, 36vw, 440px) !important;
}

.w360-home-split .w360-map-info {
  margin-top: 12px !important;
}

.w360-home-split .w360-purpose-panel {
  padding-bottom: 16px !important;
}

.w360-home-split .w360-purpose-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
}

.w360-home-split .w360-purpose-grid a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title icon"
    "temp icon"
    "city icon"
    "meta icon" !important;
  align-content: end !important;
  min-width: 0 !important;
  min-height: 124px !important;
  padding: 14px !important;
  border-radius: 8px !important;
}

.w360-home-split .w360-purpose-grid strong {
  grid-area: title !important;
  min-width: 0 !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
}

.w360-home-split .w360-purpose-grid b {
  grid-area: temp !important;
  margin-top: 3px !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.w360-home-split .w360-purpose-grid span:not(.w360-weather-glyph) {
  grid-area: city !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.w360-home-split .w360-purpose-grid small {
  grid-area: meta !important;
  min-width: 0 !important;
  max-width: calc(100% - 8px) !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-home-split .w360-purpose-grid .w360-weather-glyph {
  grid-area: icon !important;
  position: static !important;
  align-self: end !important;
  justify-self: end !important;
  width: 52px !important;
  height: 52px !important;
  right: auto !important;
  bottom: auto !important;
  transform: scale(.66) !important;
  transform-origin: right bottom !important;
}

@media (max-width: 900px) {
  .w360-home-split .w360-map.home-radar {
    height: clamp(300px, 48vw, 390px) !important;
  }

  .w360-home-split .w360-purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .w360-home-split {
    gap: 12px !important;
  }

  .w360-home-split .w360-map.home-radar {
    height: clamp(250px, 68vw, 330px) !important;
  }

  .w360-home-split .w360-purpose-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .w360-home-split .w360-purpose-grid a {
    min-height: 112px !important;
    padding: 13px !important;
  }
}

@media (max-width: 375px) {
  .w360-home-split .w360-purpose-grid a {
    grid-template-columns: minmax(0, 1fr) 46px !important;
    min-height: 106px !important;
  }

  .w360-home-split .w360-purpose-grid .w360-weather-glyph {
    transform: scale(.54) !important;
  }
}

/* Home sidebar metrics: keep compact two-column rows on responsive widths. */
.w360-home-grid > .w360-right-rail .w360-home-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
  align-items: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 12px !important;
  border-radius: 10px !important;
}

.w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric div {
  min-width: 0 !important;
}

.w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric span {
  margin-bottom: 5px !important;
  overflow: hidden !important;
  color: #66789f !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric strong {
  overflow-wrap: anywhere !important;
  color: #0f6fff !important;
  font-size: 24px !important;
  line-height: 1.02 !important;
}

.w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric strong small {
  margin-top: 4px !important;
  color: #66789f !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric > i {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  font-size: 14px !important;
}

.w360-home-grid > .w360-right-rail .w360-home-small-pair {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.w360-home-grid > .w360-right-rail .w360-home-small-card {
  min-width: 0 !important;
  min-height: 104px !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 10px !important;
}

.w360-home-grid > .w360-right-rail .w360-home-small-card h2 {
  min-width: 0 !important;
  margin: 0 0 8px !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-home-grid > .w360-right-rail .w360-home-tide-empty {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.w360-home-grid > .w360-right-rail .w360-home-tide-empty strong {
  width: fit-content !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-home-grid > .w360-right-rail .w360-home-tide-empty span,
.w360-home-grid > .w360-right-rail .w360-home-small-card > span {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #66789f !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.w360-home-grid > .w360-right-rail .w360-home-lunar-card b {
  margin-top: 8px !important;
  color: #0f6fff !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

@media (max-width: 420px) {
  .w360-home-grid > .w360-right-rail .w360-home-mini-grid,
  .w360-home-grid > .w360-right-rail .w360-home-small-pair {
    gap: 8px !important;
  }

  .w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric,
  .w360-home-grid > .w360-right-rail .w360-home-small-card {
    min-height: 96px !important;
    padding: 10px !important;
  }

  .w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric {
    grid-template-columns: minmax(0, 1fr) 24px !important;
  }

  .w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric strong,
  .w360-home-grid > .w360-right-rail .w360-home-lunar-card b {
    font-size: 21px !important;
  }

  .w360-home-grid > .w360-right-rail .w360-home-mini-grid .w360-metric > i {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
}

/* Compact province weather list. */
.w360-province-weather-wrap {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
}

.w360-province-weather-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

.w360-province-weather-list.is-collapsed .w360-province-weather-item.is-extra {
  display: none !important;
}

.w360-province-weather-item {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 8px 10px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,#fff,#f8fbff) !important;
  color: #071948 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.w360-province-weather-item[hidden] {
  display: none !important;
}

.w360-province-weather-icon {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  display: block !important;
}

.w360-province-weather-item:hover {
  border-color: rgba(15,111,255,.38) !important;
  background: #eef5ff !important;
  color: #0f6fff !important;
}

.w360-province-weather-item span {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-province-weather-item strong {
  color: #0f6fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.w360-province-weather-toggle {
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 8px 15px !important;
  border: 1px solid #d5e3f8 !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  color: #0f6fff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.w360-province-weather-toggle:hover {
  border-color: #0f6fff !important;
  background: #0f6fff !important;
  color: #fff !important;
}

.w360-province-weather-toggle i {
  font-size: 12px !important;
  transition: transform .16s ease !important;
}

.w360-province-weather-wrap.is-expanded .w360-province-weather-toggle i {
  transform: rotate(180deg) !important;
}

.w360-province-weather-item.is-hot strong {
  color: #f97316 !important;
}

.w360-province-weather-item.is-cool strong {
  color: #06b6d4 !important;
}

@media (max-width: 768px) {
  .w360-province-weather-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .w360-province-weather-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .w360-province-weather-item {
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    min-height: 46px !important;
    padding: 8px !important;
    gap: 7px !important;
  }

  .w360-province-weather-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .w360-province-weather-item span,
  .w360-province-weather-item strong {
    font-size: 12px !important;
  }
}

@media (max-width: 340px) {
  .w360-province-weather-list {
    grid-template-columns: 1fr !important;
  }
}

/* Current weather page: restore the right sidebar on desktop. */
.w360-current-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
  gap: 16px !important;
  align-items: start !important;
}

.w360-current-layout > main {
  display: block !important;
  min-width: 0 !important;
}

.w360-current-sidebar {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
  min-width: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
}

@media (max-width: 1100px) {
  .w360-current-layout {
    grid-template-columns: 1fr !important;
  }

  .w360-current-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .w360-current-sidebar {
    grid-template-columns: 1fr !important;
  }
}

/* Replaces the confusing decorative weather map with a readable national summary. */
.w360-national-overview {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

.w360-national-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg,#f8fbff,#eef6ff) !important;
}

.w360-national-summary div {
  min-width: 0 !important;
}

.w360-national-summary span {
  display: block !important;
  margin-bottom: 4px !important;
  color: #66789f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.w360-national-summary strong {
  display: block !important;
  color: #071948 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
}

.w360-national-summary p {
  margin: 5px 0 0 !important;
  color: #52647f !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.w360-national-summary a {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: #0f6fff !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.w360-national-regions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.w360-national-regions article {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 13px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.w360-national-regions img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}

.w360-national-regions article div {
  min-width: 0 !important;
}

.w360-national-regions strong {
  display: block !important;
  color: #071948 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
}

.w360-national-regions span {
  display: block !important;
  overflow: hidden !important;
  margin-top: 3px !important;
  color: #66789f !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-national-regions b {
  color: #0f6fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.w360-national-regions small {
  grid-column: 2 / -1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #52647f !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.w360-national-lists {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.w360-national-lists section {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
}

.w360-national-lists h3 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 2px !important;
  color: #071948 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.w360-national-lists h3 i {
  color: #0f6fff !important;
}

.w360-national-lists a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #071948 !important;
  text-decoration: none !important;
}

.w360-national-lists a:hover {
  color: #0f6fff !important;
  background: #eef5ff !important;
}

.w360-national-lists a span {
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-national-lists a strong {
  color: #0f6fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .w360-national-regions,
  .w360-national-lists {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .w360-national-summary {
    display: grid !important;
  }

  .w360-national-summary a {
    justify-self: start !important;
  }

  .w360-national-regions article {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    padding: 11px !important;
  }

  .w360-national-regions img {
    width: 42px !important;
    height: 42px !important;
  }

  .w360-national-regions b {
    font-size: 19px !important;
  }
}

/* Home insights: day timeline and risk overview. */
.w360-home-insight-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.w360-home-insight-row > .w360-panel {
  margin-bottom: 0 !important;
}

.w360-home-timeline {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.w360-home-timeline article {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,#fff,#f8fbff) !important;
}

.w360-home-timeline article > div {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
}

.w360-home-timeline article > div i {
  grid-row: span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #0f6fff !important;
}

.w360-home-timeline span {
  color: #071948 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.w360-home-timeline small {
  color: #66789f !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

.w360-home-timeline img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}

.w360-home-timeline strong {
  color: #0f6fff !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.w360-home-timeline p {
  min-height: 34px !important;
  margin: 0 !important;
  color: #52647f !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.w360-home-timeline footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.w360-home-timeline footer b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #315b93 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.w360-home-risk-grid {
  display: grid !important;
  gap: 9px !important;
}

.w360-home-risk-grid article {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 10px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.w360-home-risk-grid article > i {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #0f6fff !important;
}

.w360-home-risk-grid div {
  min-width: 0 !important;
}

.w360-home-risk-grid span,
.w360-home-risk-grid small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-home-risk-grid span {
  color: #66789f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.w360-home-risk-grid strong {
  display: block !important;
  margin-top: 2px !important;
  color: #071948 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.w360-home-risk-grid small {
  margin-top: 4px !important;
  color: #52647f !important;
  font-size: 12px !important;
}

.w360-home-risk-grid article > b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 46px !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  background: #ecfdf5 !important;
  color: #16a34a !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.w360-home-risk-grid .is-mid > b {
  background: #fff7ed !important;
  color: #ea580c !important;
}

.w360-home-risk-grid .is-high > b {
  background: #fff1f2 !important;
  color: #dc2626 !important;
}

.w360-home-risk-grid .is-mid > i {
  background: #fff7ed !important;
  color: #ea580c !important;
}

.w360-home-risk-grid .is-high > i {
  background: #fff1f2 !important;
  color: #dc2626 !important;
}

.w360-province-weather-search {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) 30px !important;
  align-items: center !important;
  gap: 8px !important;
  width: min(100%, 520px) !important;
  min-height: 42px !important;
  padding: 0 8px 0 12px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  color: #66789f !important;
}

.w360-province-weather-search input {
  min-width: 0 !important;
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #071948 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

.w360-province-weather-search button {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #66789f !important;
  cursor: pointer !important;
}

.w360-province-weather-search button:hover {
  background: #eef5ff !important;
  color: #0f6fff !important;
}

.w360-province-weather-empty {
  margin: -4px 0 0 !important;
  color: #66789f !important;
  font-size: 13px !important;
}

/* Refined home planning board and province search toolbar. */
.w360-home-insight-panel {
  padding: 18px !important;
}

.w360-home-insight-panel > .w360-panel-head {
  margin-bottom: 12px !important;
}

.w360-home-insight-board {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.w360-home-insight-block {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 10px !important;
  background: #f8fbff !important;
}

.w360-home-insight-title {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.w360-home-insight-title span {
  color: #071948 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.w360-home-insight-title small {
  color: #66789f !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: right !important;
}

.w360-home-insight-panel .w360-home-timeline {
  gap: 8px !important;
}

.w360-home-insight-panel .w360-home-timeline article {
  min-height: 184px !important;
  padding: 11px !important;
  background: #fff !important;
}

.w360-home-insight-panel .w360-home-risk-grid {
  gap: 8px !important;
}

.w360-home-insight-panel .w360-home-risk-grid article {
  min-height: 58px !important;
  padding: 9px 10px !important;
  background: #fff !important;
}

.w360-province-weather-toolbar {
  display: grid !important;
  grid-template-columns: minmax(180px, 260px) minmax(280px, 520px) !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding: 10px !important;
  border: 1px solid #e5edf8 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg,#fbfdff,#f6faff) !important;
}

.w360-province-weather-toolbar > div {
  min-width: 0 !important;
}

.w360-province-weather-toolbar strong,
.w360-province-weather-toolbar span {
  display: block !important;
}

.w360-province-weather-toolbar strong {
  color: #071948 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.w360-province-weather-toolbar span {
  margin-top: 2px !important;
  color: #66789f !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.w360-province-weather-toolbar .w360-province-weather-search {
  width: 100% !important;
  min-height: 40px !important;
  background: #fff !important;
}

@media (max-width: 1100px) {
  .w360-home-insight-row {
    grid-template-columns: 1fr !important;
  }

  .w360-home-insight-board {
    grid-template-columns: 1fr !important;
  }

  .w360-province-weather-toolbar {
    grid-template-columns: minmax(160px, 220px) minmax(260px, 1fr) !important;
  }
}

@media (max-width: 700px) {
  .w360-home-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .w360-home-insight-panel {
    padding: 14px !important;
  }

  .w360-home-insight-block {
    padding: 10px !important;
  }

  .w360-home-insight-title {
    align-items: start !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .w360-home-insight-title small {
    text-align: left !important;
  }

  .w360-province-weather-toolbar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 420px) {
  .w360-home-timeline {
    grid-template-columns: 1fr !important;
  }

  .w360-home-risk-grid article {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    padding: 9px !important;
  }

  .w360-home-risk-grid article > i {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Province list: compact search aligned with the panel title. */
.w360-province-weather-panel {
  position: relative !important;
}

.w360-province-weather-panel > .w360-panel-head {
  min-height: 42px !important;
  margin-bottom: 12px !important;
  padding-right: 340px !important;
}

.w360-province-weather-panel .w360-province-weather-search {
  position: absolute !important;
  top: 12px !important;
  right: 18px !important;
  z-index: 2 !important;
  width: min(330px, calc(100% - 260px)) !important;
  min-height: 38px !important;
  grid-template-columns: 18px minmax(0, 1fr) 28px !important;
  padding: 0 6px 0 11px !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
}

.w360-province-weather-panel .w360-province-weather-search input {
  font-size: 13px !important;
  font-weight: 750 !important;
}

.w360-province-weather-panel .w360-province-weather-search button {
  width: 28px !important;
  height: 28px !important;
}

.w360-province-weather-panel .w360-province-weather-empty {
  margin: -2px 0 10px !important;
}

.w360-province-weather-panel .w360-province-weather-list {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  .w360-province-weather-panel > .w360-panel-head {
    padding-right: 0 !important;
    margin-bottom: 8px !important;
  }

  .w360-province-weather-panel .w360-province-weather-search {
    position: static !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    border-radius: 8px !important;
  }
}

/* Home lower content: full-width history dashboard plus balanced news/community row. */
.w360-home-history-panel {
  margin-bottom: 14px !important;
  background:
    radial-gradient(circle at 96% 12%, rgba(15, 111, 255, .08), transparent 26%),
    linear-gradient(180deg, #fff, #f8fbff) !important;
}

.w360-home-history-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.w360-home-history-summary,
.w360-home-history-chart {
  min-width: 0 !important;
}

.w360-home-history-summary {
  display: grid !important;
  gap: 10px !important;
}

.w360-home-history-panel .w360-home-history-top {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.w360-home-history-panel .w360-home-history-top div {
  position: relative !important;
  min-height: 92px !important;
  padding: 13px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 111, 255, .06) !important;
}

.w360-home-history-panel .w360-home-history-top i {
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #0f6fff !important;
}

.w360-home-history-panel .w360-home-history-top strong {
  padding-right: 34px !important;
  font-size: 25px !important;
}

.w360-home-history-panel .w360-home-history-top span {
  max-width: 132px !important;
  font-size: 12px !important;
}

.w360-home-history-chart {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #dbe8ff !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.w360-home-history-chart-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.w360-home-history-chart-head strong,
.w360-home-history-chart-head span {
  display: block !important;
}

.w360-home-history-chart-head strong {
  color: #071948 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.w360-home-history-chart-head span {
  margin-top: 3px !important;
  color: #66789f !important;
  font-size: 12px !important;
}

.w360-home-history-chart-head b {
  flex: 0 0 auto !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #ecfdf5 !important;
  color: #16a34a !important;
  font-size: 12px !important;
}

.w360-home-history-panel .w360-chart-box {
  height: 250px !important;
  border: 0 !important;
}

.w360-home-history-panel .w360-home-history-note {
  min-height: 64px !important;
  border: 1px solid #dbeafe !important;
  background: #eff6ff !important;
}

.w360-home-news-community {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.w360-home-news-community > .w360-panel {
  margin-bottom: 0 !important;
}

.w360-home-news-panel,
.w360-home-community-panel {
  background: linear-gradient(180deg, #fff, #fbfdff) !important;
}

.w360-home-news-panel .w360-list,
.w360-home-community-panel .w360-list {
  gap: 10px !important;
}

.w360-home-news-panel .w360-list a,
.w360-home-community-panel .w360-list > div {
  min-height: 66px !important;
  padding: 11px !important;
  border: 1px solid #e5edf8 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.w360-home-news-panel .w360-list a:hover {
  border-color: #bfdbfe !important;
  background: #f8fbff !important;
}

.w360-home-news-panel .w360-list span,
.w360-home-community-panel .w360-list span {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #0f6fff !important;
  font-weight: 900 !important;
}

.w360-home-community-panel .w360-list span {
  background: linear-gradient(135deg, #e0f2fe, #eef5ff) !important;
}

.w360-home-news-panel .w360-list strong,
.w360-home-community-panel .w360-list strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.w360-home-news-panel .w360-list small,
.w360-home-community-panel .w360-list small {
  margin-top: 3px !important;
  color: #66789f !important;
  font-size: 12px !important;
}

.w360-community-box {
  display: grid !important;
  gap: 12px !important;
}

.w360-community-live {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #eff6ff, #fff) !important;
}

.w360-community-live > span {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: #0f6fff !important;
  color: #fff !important;
}

.w360-community-live strong,
.w360-community-live small {
  display: block !important;
}

.w360-community-live strong {
  color: #071948 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.w360-community-live small {
  margin-top: 3px !important;
  color: #52647f !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.w360-community-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(128px, .7fr) auto !important;
  gap: 8px !important;
  align-items: end !important;
}

.w360-community-form label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.w360-community-form label span {
  color: #66789f !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.w360-community-form input,
.w360-community-form select {
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  border: 1px solid #dce6f7 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #071948 !important;
  font-size: 13px !important;
}

.w360-community-form button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #0f6fff !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.w360-community-feed {
  display: grid !important;
  gap: 8px !important;
}

.w360-community-feed p {
  margin: 0 !important;
  padding: 12px !important;
  border: 1px dashed #cfe0f7 !important;
  border-radius: 10px !important;
  color: #66789f !important;
  font-size: 12px !important;
  text-align: center !important;
  background: #fbfdff !important;
}

.w360-community-feed div {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 2px 10px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 10px !important;
  border: 1px solid #e5edf8 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.w360-community-feed div span {
  grid-row: span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #0f6fff !important;
  font-weight: 900 !important;
}

.w360-community-feed strong,
.w360-community-feed small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.w360-community-feed strong {
  color: #071948 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.w360-community-feed small {
  color: #66789f !important;
  font-size: 12px !important;
}

@media (max-width: 1100px) {
  .w360-home-history-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .w360-home-news-community {
    grid-template-columns: 1fr !important;
  }

  .w360-home-history-panel .w360-home-history-top {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .w360-community-form {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 460px) {
  .w360-home-history-panel .w360-home-history-top {
    grid-template-columns: 1fr !important;
  }

  .w360-home-history-chart-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .w360-home-history-panel .w360-chart-box {
    height: 220px !important;
  }
}

/* Final hero metric card override: must stay at EOF to beat earlier responsive rules. */
.w360-current-hero .w360-current-hero-stats,
.w360-hero:not(.is-compact) .w360-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255,255,255,.24) !important;
}

.w360-current-hero .w360-current-hero-stats div,
.w360-current-hero .w360-current-hero-stats div + div,
.w360-current-hero .w360-current-hero-stats div:last-child,
.w360-hero:not(.is-compact) .w360-hero-stats div,
.w360-hero:not(.is-compact) .w360-hero-stats div + div,
.w360-hero:not(.is-compact) .w360-hero-stats div:last-child {
  min-width: 0 !important;
  min-height: 86px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  padding: 10px 8px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.12) !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(5px);
}

.w360-current-hero .w360-current-hero-stats i,
.w360-hero:not(.is-compact) .w360-hero-stats i {
  display: inline-flex !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  opacity: .92 !important;
  visibility: visible !important;
}

.w360-current-hero .w360-current-hero-stats span,
.w360-hero:not(.is-compact) .w360-hero-stats span {
  display: block !important;
  margin-top: 5px !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  opacity: .9 !important;
  white-space: normal !important;
}

.w360-current-hero .w360-current-hero-stats strong,
.w360-hero:not(.is-compact) .w360-hero-stats strong {
  display: block !important;
  margin-top: 5px !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
}

@media (max-width: 900px) {
  .w360-current-hero .w360-current-hero-stats,
  .w360-hero:not(.is-compact) .w360-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .w360-current-hero .w360-current-hero-stats,
  .w360-hero:not(.is-compact) .w360-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}