/* ==========================================================================
   VPNDU · iplookup.css(网络检测页专属)
   仅本页使用:结果卡 / 字段行 / 状态标签 / 口径面板 / 自查步骤序号
   颜色与几何一律引用 base.css 的设计令牌,不新增硬编码色值
   ========================================================================== */

.ipl-tool{max-width:900px}

.ipl-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-soft);
  min-width:0;
}
.ipl-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px 20px;flex-wrap:wrap;
}
.ipl-card-head h2{font-size:clamp(20px,1.8vw,24px)}

.ipl-rows{
  display:grid;gap:0;
  margin-top:20px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-panel);
  overflow:hidden;
}
.ipl-row{
  display:grid;
  grid-template-columns:140px minmax(0,1fr) auto;
  align-items:center;
  gap:8px 14px;
  padding:13px 16px;
  border-bottom:1px solid var(--border);
  min-width:0;
}
.ipl-row:last-child{border-bottom:0}
.ipl-key{
  font-size:13px;font-weight:700;color:var(--text-muted);
  white-space:nowrap;
}
.ipl-val{
  font-family:var(--font-mono);
  font-size:15px;font-weight:700;color:var(--text);
  min-width:0;overflow-wrap:anywhere;
}
.ipl-val[data-state="pending"]{color:var(--text-muted);font-weight:500}
.ipl-val[data-state="error"]{color:var(--warn);font-weight:600}
.ipl-val.is-ok{color:var(--cyan-ink)}
.ipl-val.is-warn{color:var(--warn)}
.ipl-tag{
  display:inline-flex;align-items:center;
  max-width:100%;overflow:hidden;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--bg-panel2);color:var(--text-muted);
  font-size:11.5px;font-weight:700;white-space:nowrap;
}

.ipl-actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;
}
.ipl-note{
  flex:1 1 260px;min-width:0;
  font-size:13px;line-height:1.7;color:var(--text-muted);
}
.ipl-note.is-error{color:var(--error)}

.ipl-facts{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:20px 34px;align-items:center;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px;
  min-width:0;
}
.ipl-facts h2{font-size:clamp(21px,1.9vw,26px)}
.ipl-facts p{margin-top:12px;font-size:15px;line-height:1.8;color:var(--text-muted)}

/* 自查步骤:自定义序号圆标(覆盖 .prose ol 的左内边距) */
.prose .ipl-steps{
  list-style:none;
  padding-left:0;
  margin-top:16px;
  counter-reset:ipl;
}
.prose .ipl-steps li{
  position:relative;
  padding-left:38px;
  margin-top:14px;
  line-height:1.85;
  color:var(--text-muted);
}
.prose .ipl-steps li::before{
  counter-increment:ipl;
  content:counter(ipl);
  position:absolute;left:0;top:3px;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-panel2);color:var(--accent-dark);
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  line-height:1;
}
.prose .ipl-steps li strong{color:var(--text)}

@media (max-width:900px){
  .ipl-facts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ipl-card{padding:18px}
  .ipl-row{grid-template-columns:1fr auto;gap:6px 10px}
  .ipl-key{grid-column:1/-1}
  .ipl-actions{gap:10px}
}