.gpp-status-heading-row {
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.gpp-status-heading-row > h1,
.gpp-status-heading-row > h2,
.gpp-status-heading-row > h3,
.gpp-status-heading-row > h4,
.gpp-status-heading-row > div,
.gpp-status-heading-row > span,
.gpp-status-heading-row > p {
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.gpp-status-products-row {
  width:min(920px,100%);
  justify-content:center;
  margin:0 auto 12px;
}


.gpp-status-home-banner-wrap {
  max-width:1420px;
  margin:16px auto 6px;
  padding:0 18px;
  display:flex;
  justify-content:center;
}

.gpp-status-home-banner-wrap #gpp-service-status {
  width:min(760px,100%);
  flex-basis:auto;
}

#gpp-service-status {
  width:520px;
  max-width:100%;
  flex:0 1 520px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 12px;
  border:1px solid #d7e1dd;
  border-radius:15px;
  background:linear-gradient(135deg,#183f3b 0%,#2f6259 100%);
  box-shadow:0 8px 24px rgba(18,56,50,.12);
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}

.gpp-status-head {
  flex:0 0 112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding-right:12px;
  border-right:1px solid rgba(255,255,255,.2);
}

.gpp-status-title {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
}

.gpp-status-dot {
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#77e2ad;
  box-shadow:0 0 0 4px rgba(119,226,173,.13);
}

.gpp-status-state {
  padding-left:15px;
  color:#bff3d7;
  font-size:10px;
  font-weight:800;
}

.gpp-status-grid {
  min-width:0;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.gpp-status-item {
  min-width:0;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:10px;
  background:rgba(255,255,255,.07);
}

.gpp-status-label {
  display:block;
  margin-bottom:3px;
  color:rgba(255,255,255,.68);
  font-size:9px;
  line-height:1.25;
  white-space:nowrap;
}

.gpp-status-value {
  display:block;
  color:#fff;
  font-size:13px;
  font-weight:850;
  line-height:1.25;
  white-space:nowrap;
}

@media (max-width:900px) {
  .gpp-status-heading-row {
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .gpp-status-products-row {
    align-items:center;
  }

  .gpp-status-products-row > *:first-child {
    align-self:center;
  }

  #gpp-service-status {
    width:100%;
    flex-basis:auto;
  }
}


@media (max-width:760px) {
  .gpp-status-home-banner-wrap {
    margin:12px auto 4px;
    padding:0 12px;
  }
}

@media (max-width:560px) {
  #gpp-service-status {
    display:block;
    padding:11px;
  }

  .gpp-status-head {
    width:100%;
    padding:0 0 9px;
    margin-bottom:9px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }

  .gpp-status-state {
    padding-left:0;
  }

  .gpp-status-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }

  .gpp-status-item {
    padding:8px 6px;
    text-align:center;
  }

  .gpp-status-label {
    font-size:8.5px;
  }

  .gpp-status-value {
    font-size:11px;
  }
}