.ip-card {
  padding: clamp(22px, 5vw, 34px);
}

.ip-card-head { margin-bottom: 22px; }
.ip-card-head h2 {
  margin: 0;
  color: #1e293b;
  font-size: 17px;
  letter-spacing: -.02em;
}

.ip-field > span {
  display: block;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.ip-query-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.ip-address-input {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid #d7dee7;
  border-radius: 10px;
  background: #fbfcfd;
  color: #263449;
  font: 14px/1 var(--wb-font-family-code, monospace);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ip-address-input::placeholder { color: #a4afbd; }
.ip-address-input:focus {
  border-color: #94a3b8;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .16);
}

.ip-status { margin: 10px 0 0; }
.ip-status:empty { min-height: 0; margin-top: 0; }

.ip-result {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.ip-result-address {
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.ip-result-address span,
.ip-detail-item span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
}

.ip-result-address strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: #172033;
  font: 700 clamp(22px, 5vw, 30px)/1.25 var(--wb-font-family-code, monospace);
  letter-spacing: -.025em;
}

.ip-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ip-detail-item {
  min-width: 0;
  padding: 18px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.ip-detail-item:nth-child(odd) { border-right: 1px solid #e2e8f0; }
.ip-detail-item:nth-last-child(-n + 2) { border-bottom: 0; }
.ip-detail-item strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #334155;
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .ip-query-row { grid-template-columns: 1fr; }
  .ip-query-row wb-button { width: 100%; }
  .ip-location-grid { grid-template-columns: 1fr; }
  .ip-detail-item,
  .ip-detail-item:nth-child(odd),
  .ip-detail-item:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .ip-detail-item:last-child { border-bottom: 0; }
}