.nws10-wrap{
  width: 100%;
  box-sizing: border-box;

  border: var(--nws10-bw, 2px) solid var(--nws10-border, #111);
  border-radius: var(--nws10-radius, 10px);
  background: var(--nws10-bg, #0b0b0b);
  color: var(--nws10-text, #fff);

  padding: 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.nws10-header{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.nws10-title{
  font-weight: 900;
  font-size: var(--nws10-title, 18px);
  letter-spacing: .2px;
}

.nws10-title-hidden{
  display: none;
}

.nws10-form{
  display: flex;
  gap: 8px;
  align-items: center;
}

.nws10-zip{
  width: 160px;
  max-width: 70vw;
  padding: 8px 10px;
  border-radius: 8px;

  border: 1px solid var(--nws10-input-border, #2b2b2b);
  background: var(--nws10-input-bg, #121212);
  color: var(--nws10-input-text, #ffffff);

  outline: none;
}

.nws10-btn{
  padding: 8px 12px;
  border-radius: 8px;

  border: 1px solid var(--nws10-btn-border, #2b2b2b);
  background: var(--nws10-btn-bg, #1f1f1f);
  color: var(--nws10-btn-text, #ffffff);

  cursor: pointer;
  font-weight: 800;
}

.nws10-btn:hover{ filter: brightness(1.1); }

.nws10-subhead{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 8px;
  opacity: .9;
  font-size: 13px;
  flex-wrap: wrap;
}

.nws10-status{
  margin-top: 10px;
  font-size: 14px;
  opacity: .95;
}

.nws10-status.is-error{
  color: #ffb3b3;
  font-weight: 900;
}

.nws10-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(var(--nws10-cols, 5), minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px){
  .nws10-grid{
    grid-template-columns: repeat(var(--nws10-cols-mobile, 2), minmax(0, 1fr));
  }
}

.nws10-card{
  background: var(--nws10-card-bg, #101010);
  border: 1px solid var(--nws10-card-border, #232323);
  border-radius: 12px;
  padding: var(--nws10-pad, 10px);
  min-height: 110px;
}

.nws10-card-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.nws10-day{
  font-weight: 900;
  font-size: var(--nws10-day, 14px);
}

.nws10-temp{
  font-weight: 900;
  font-size: var(--nws10-temp, 20px);
}

.nws10-unit{
  font-size: 12px;
  opacity: .85;
  margin-left: 2px;
}

.nws10-mid{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.nws10-icon{
  width: var(--nws10-icon, 42px);
  height: var(--nws10-icon, 42px);
  flex: 0 0 auto;
  border-radius: 8px;
}

.nws10-desc{
  font-size: var(--nws10-desc, 13px);
  line-height: 1.2;
  opacity: .95;
}

.nws10-wind{
  margin-top: 8px;
  font-size: 12px;
  opacity: .85;
}

.nws10-footer{
  margin-top: 12px;
  font-size: 12px;
  opacity: .7;
}


.nws10-pop{
  margin-top: 8px;
  font-size: 12px;
  opacity: .9;
  font-weight: 800;
}