/* ==========================================================================
   VPNDT · iplookup.css
   我的 IP 查询页专属样式(仅本页引入,不覆盖共享组件)
   ========================================================================== */

/* ---------- 页头 ---------- */
.ipl-hero{
  padding-top:36px;
  padding-bottom:10px;
  background:linear-gradient(180deg,var(--accent-05) 0%,var(--bg) 74%);
}
.ipl-hero h1{font-size:clamp(30px,4.4vw,52px);margin-bottom:10px}
.ipl-hero__sub{font-size:16px;line-height:1.7;color:var(--muted);max-width:72ch}

/* ---------- 结果卡 ---------- */
.ipl-panel{display:flex;flex-direction:column;gap:16px}
.ipl-panel__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ipl-panel__head h2{font-size:clamp(20px,2.2vw,26px)}
.ipl-actions{display:flex;flex-wrap:wrap;gap:10px}
.ipl-actions .btn svg{width:15px;height:15px}

.ipl-status{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;line-height:1.6;color:var(--muted);min-height:22px;
}
.ipl-status::before{
  content:"";width:8px;height:8px;margin-top:6px;border-radius:50%;
  background:var(--muted);flex:none;
}
.ipl-panel[data-state="loading"] .ipl-status::before{background:var(--warn)}
.ipl-panel[data-state="done"] .ipl-status::before{background:var(--success)}
.ipl-panel[data-state="error"] .ipl-status::before{background:var(--error)}
.ipl-panel[data-state="error"] .ipl-status{color:var(--text)}

.ipl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ipl-cell{
  background:var(--bg-panel2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:14px 16px;min-width:0;box-shadow:inset 0 1px 0 var(--hilite);
}
.ipl-cell dt{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.ipl-cell dd{
  margin-top:7px;font-size:17px;font-weight:600;line-height:1.4;
  color:var(--text);overflow-wrap:anywhere;
}
.ipl-cell dd.is-mono{font-family:var(--font-mono);font-size:15.5px;letter-spacing:.01em}
.ipl-panel[data-state="loading"] .ipl-cell dd,
.ipl-panel[data-state="error"] .ipl-cell dd{color:var(--muted);font-weight:500}
.ipl-foot{font-size:12.5px;color:var(--muted)}

/* ---------- 解读卡 ---------- */
.ipl-mean h3{
  font-family:var(--font-body);font-size:16.5px;font-weight:700;
  letter-spacing:0;margin-bottom:8px;
}
.ipl-mean p{font-size:14px;color:var(--muted)}

/* ---------- DNS 自查 ---------- */
.ipl-split{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:start}
.ipl-aside{display:flex;flex-direction:column;gap:14px;min-width:0}
.ipl-diagram{
  background:var(--bg-panel2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:16px 14px;color:var(--accent);box-shadow:inset 0 1px 0 var(--hilite);
}
.ipl-diagram svg{width:100%;height:auto;max-width:520px;margin-inline:auto}
.ipl-diagram__cap{font-size:12.5px;color:var(--muted)}
.ipl-cmd{
  background:var(--bg-panel2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:14px 16px;font-size:13px;line-height:1.7;color:var(--text);
}
.ipl-cmd code{font-size:13px}

/* ---------- 复制回落用的临时输入域 ---------- */
.ipl-copy-field{
  position:fixed;left:-9999px;top:0;width:1px;height:1px;
  opacity:0;pointer-events:none;
}

/* ---------- 响应 ---------- */
@media (max-width:900px){
  .ipl-split{grid-template-columns:1fr;gap:22px}
}
@media (max-width:640px){
  .ipl-grid{grid-template-columns:1fr}
  .ipl-hero{padding-top:26px}
}