/* ============================================================================
   VPNJM · IP 查询页
   仅本页使用的组件样式：结果字段网格、状态点、解读卡、对照表间距。
   设计令牌与通用面板来自 base.css / components.css，此处不重复定义。
   ========================================================================== */

.ip-tool{min-width:0}

/* ── 查询状态点 ─────────────────────────────────────────────────────────── */
.ip-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-muted);
  white-space:nowrap;
}
.ip-state::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgb(var(--text-rgb)/.35);
  box-shadow:0 0 0 3px rgb(var(--text-rgb)/.08);
  flex:none;
}
.ip-state.is-loading{color:var(--warn)}
.ip-state.is-loading::before{background:var(--warn);box-shadow:0 0 0 3px rgb(var(--warn-rgb)/.14)}
.ip-state.is-ok{color:var(--success)}
.ip-state.is-ok::before{background:var(--success);box-shadow:0 0 0 3px rgb(var(--success-rgb)/.14)}
.ip-state.is-error{color:var(--error)}
.ip-state.is-error::before{background:var(--error);box-shadow:0 0 0 3px rgb(var(--error-rgb)/.14)}

/* ── 结果字段网格 ───────────────────────────────────────────────────────── */
.ip-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin:0;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
}
.ip-cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:14px 16px 15px;
  background:var(--bg-panel);
}
.ip-cell dt{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--text-muted);
}
.ip-cell dd{
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ip-cell dd.mono{font-family:var(--font-mono);font-size:13.5px;letter-spacing:.01em}
.ip-cell dd.is-empty{font-weight:500;color:var(--text-muted)}

/* ── 操作与提示 ─────────────────────────────────────────────────────────── */
.ip-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.ip-note{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}
.ip-note.is-ok{color:var(--success)}
.ip-note.is-error{color:var(--error)}

.ip-aside{margin-top:16px}

/* ── 结果解读卡 ─────────────────────────────────────────────────────────── */
.ip-explain{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:14px;
  min-width:0;
}
.ip-explain-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:18px 20px 20px;
  border-radius:var(--r-md);
  background:var(--bg-panel);
  border:1px solid rgb(var(--text-rgb)/.08);
  box-shadow:var(--shadow-soft);
}
.ip-k{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
}
.ip-explain-item h3{font-size:15.5px;letter-spacing:-.01em}
.ip-explain-item p{font-size:13px;line-height:1.72;color:var(--text-muted)}

/* ── 现象对照表 ─────────────────────────────────────────────────────────── */
.ip-table{margin-top:22px}
.ip-caption{
  caption-side:top;
  text-align:left;
  padding:12px 16px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}

/* ── 复制兜底用的离屏文本域 ─────────────────────────────────────────────── */
.ip-copy-proxy{
  position:fixed;
  top:-1000px;
  left:-1000px;
  width:1px;
  height:1px;
  padding:0;
  border:0;
  opacity:0;
  pointer-events:none;
}

/* ── 响应式 ─────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
  .ip-grid{grid-template-columns:1fr}
  .ip-actions .btn{width:100%}
  .ip-explain-item{padding:16px}
}