.ip-result {
  margin-top: 24px;
  padding: 22px;
}

.ip-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.result-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.88rem;
}

.ip-result h2,
.section-block-head h2 {
  margin: 0;
  font-size: 1.18rem;
}

.result-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}

.result-status.is-success {
  border-color: #b9d3c4;
  background: var(--ok-soft);
  color: #3f6856;
}

.result-status.is-loading {
  border-color: #c9c0b7;
  background: #f4eee7;
  color: var(--muted);
}

.result-status.is-error {
  border-color: #dfb9b6;
  background: #f8e9e7;
  color: #95443f;
}

.ip-value-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}

.ip-value {
  flex: 1;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: clamp(1.2rem, 4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.ip-error-message {
  margin: 18px 0 0;
  padding: 13px 15px;
  border-left: 3px solid #a34743;
  background: #f8e9e7;
  color: #7d3935;
  font-weight: 700;
}

.ip-help {
  margin: 14px 0 0;
  color: var(--muted);
}

.fallback-link {
  margin: 16px 0 0;
}

.endpoint {
  margin-top: 22px;
  padding: 20px;
}

.section-block-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.endpoint-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.endpoint-row > code {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow-wrap: anywhere;
}

.endpoint-actions {
  display: flex;
  gap: 8px;
}

.endpoint-spec {
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
}

.endpoint-spec > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.endpoint-spec dt {
  font-weight: 700;
}

.endpoint-spec dd {
  margin: 0;
  color: var(--muted);
}

.code-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.code-list .code-example {
  margin: 0;
}

.ip-note {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--ok);
  background: var(--ok-soft);
  color: #3f6856;
}

.ip-note strong {
  display: block;
  margin-bottom: 3px;
}

.ip-note p {
  margin: 0;
}

@media (max-width: 700px) {
  .ip-result-head,
  .ip-value-row,
  .endpoint-row {
    align-items: stretch;
    flex-direction: column;
  }

  .result-status {
    align-self: flex-start;
  }

  .endpoint-actions {
    flex-direction: column;
  }

  .endpoint-actions > * {
    width: 100%;
  }

  .endpoint-spec > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}