/* IP Lookup — tool-specific styles on top of /ds/v1/toolkit.css */

.ip-main { display: flex; flex-direction: column; gap: 16px; }
.ip-card { margin-bottom: 0; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 24px; box-shadow: var(--ds-shadow); text-align: center; }
.ip-card.loading { opacity: .7; }
.ip-card.tested { border-color: color-mix(in srgb, var(--ds-link) 40%, transparent) }
.ip-display .ip-label { font-size: 15px; color: var(--ds-text-muted); margin-bottom: 10px; font-weight: 500; letter-spacing: .2px }
.ip-display .ip-address { font-size: clamp(24px, 5vw, 34px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; word-break: break-all; min-height: 44px; display: flex; align-items: center; justify-content: center }
.ip-display .ip-address.loading { color: var(--ds-text-muted) }
.ip-geo { min-height: 20px; font-size: 14px; color: var(--ds-text-muted); margin-top: 4px }
.status-msg { min-height: 20px; font-size: 13px; margin-top: 6px }
.status-msg.success { color: var(--ds-success) }
.status-msg.error { color: var(--ds-danger, #dc2626) }
.status-msg.idle { color: var(--ds-text-muted) }
.ip-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap }
.ip-actions .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-spin .7s linear infinite; margin-left: 6px; vertical-align: middle }
@keyframes ds-spin { to { transform: rotate(360deg) } }

/* knowledge bar */
.knowledge-row { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; justify-content: center; padding: 18px 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--ds-border); overflow: hidden }
.knowledge-row a { font-size: 13px; color: var(--ds-text-muted); padding: 6px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); text-decoration: none; transition: color .2s, border-color .2s, background .2s; flex-shrink: 0; white-space: nowrap }
.knowledge-row a:hover { color: var(--ds-link); border-color: var(--ds-link); background: color-mix(in srgb, var(--ds-link) 14%, transparent); text-decoration: none }
.knowledge-row a.kb-more { color: var(--ds-link); border-color: color-mix(in srgb, var(--ds-link) 50%, transparent); font-weight: 500 }
.knowledge-row a.kb-hide { display: none }

/* docs 子页 topbar */
.topbar { display: flex; align-items: center; max-width: 720px; margin: 0 auto; padding: 24px 24px 0 }
.topbar-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ds-text); text-decoration: none; font-weight: 600; font-size: 16px }
.topbar-brand:hover { text-decoration: none }
.topbar-brand svg { width: 28px; height: 28px }

/* bilingual content blocks */
.lang-zh { display: none }
html[lang^="zh"] .lang-zh { display: block }
html[lang^="zh"] .lang-en { display: none }

/* responsive */
@media (max-width: 640px) {
  .ip-logo svg { width: 52px; height: 52px; }
  .ip-display .ip-address { font-size: 24px; }
  .knowledge-row { flex-wrap: wrap; }
  .knowledge-row a { font-size: 12px; padding: 4px 10px; }
}
/* Geo 字段网格（对标 ipinfo.io 多字段展示） */
.ip-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ds-border); }
.ip-details__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ip-detail { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--ds-bg-subtle); border-radius: var(--ds-radius-sm); text-align: center; }
.ip-detail__label { font-size: 11px; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ip-detail__value { font-size: 14px; color: var(--ds-text); word-break: break-all; }