/* ==========================================================================
   VPNDX — iplookup.css
   我的 IP 查询页专属样式:检测结果卡、结果解读、DNS 泄漏自查、隐私提示。
   所有颜色 / 圆角 / 阴影引用 base.css 的 :root 令牌,不散落硬编码色值。
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.ip-hero{
  position:relative;
  padding:52px 0 44px;
}
.ip-hero__glow{
  position:absolute;
  top:-150px;
  right:-130px;
  width:min(560px, 78vw);
  height:min(560px, 78vw);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 68%);
}
.ip-hero__inner{position:relative;z-index:1}
.ip-hero .lede{max-width:40em}
.ip-hero__facts{margin-top:26px}

/* ----------------------------------------------------------- section head */
.ip-sec-head{margin-bottom:26px}
.ip-sec-head .mono-label{display:block;margin-bottom:8px}
.ip-sec-head h2{margin:0 0 12px}
.ip-sec-head .lede{max-width:44em}

/* ------------------------------------------------------------ tool layout */
.ip-tool{padding-top:8px}
.ip-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}
.ip-layout > *{min-width:0}
.ip-side{display:grid;gap:16px;min-width:0}
.ip-side .card p{margin:0 0 12px}

/* ------------------------------------------------------------ result card */
.ip-card{position:relative}
.ip-card__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.ip-card__head h3{margin:0;font-size:18px}
.ip-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  min-height:30px;
  padding:6px 14px;
  border-radius:var(--r-pill);
  background:var(--panel-2);
  font-size:12px;
  font-weight:600;
  color:var(--text);
}
.ip-status::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--muted);
}
.ip-status[data-state="loading"]::before{
  background:var(--warn);
  animation:ip-pulse 1.4s ease-in-out infinite;
}
.ip-status[data-state="ok"]::before{
  background:var(--success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}
.ip-status[data-state="error"]::before{
  background:var(--error);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent);
}
@keyframes ip-pulse{
  0%,100%{opacity:.3}
  50%{opacity:1}
}

.ip-rows{
  margin:0 0 20px;
  border-top:1px solid var(--border-soft);
}
.ip-row{
  display:grid;
  grid-template-columns:132px minmax(0, 1fr);
  gap:12px;
  align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid var(--border-soft);
}
.ip-row dt{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
.ip-row dd{
  margin:0;
  min-width:0;
  font:700 17px/1.45 var(--font-display);
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.ip-row dd.is-mono{
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:-.015em;
}

.ip-actions{margin:0 0 14px}
.ip-note{
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
}
.ip-note[data-state="ok"]{color:var(--success)}
.ip-note[data-state="error"]{color:var(--error)}

/* clipboard fallback buffer (never visible, never inline-styled) */
.ip-copy-buffer{
  position:absolute;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
}

/* ------------------------------------------------------------- step list */
.ip-steps{
  counter-reset:ipstep;
  display:grid;
  gap:14px;
  margin:0;
}
.ip-steps li{
  position:relative;
  padding-left:40px;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}
.ip-steps li::before{
  counter-increment:ipstep;
  content:counter(ipstep, decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm);
  background:var(--candy-blue);
  color:var(--accent-dark);
  font:700 11px/1 var(--font-mono);
  letter-spacing:.04em;
}
.ip-steps strong{color:var(--text);font-weight:600}

/* --------------------------------------------------------------- explain */
.ip-explain .mono-tag{margin-bottom:12px}
.ip-explain h3{font-size:18px;margin:0 0 8px}
.ip-explain p{margin:0}

/* ------------------------------------------------------------------- dns */
.ip-dns{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:28px;
  align-items:start;
}
.ip-dns > *{min-width:0}
.ip-dns__side{display:grid;gap:16px;min-width:0}
.ip-dns__side .callout{margin:0}
.ip-code{
  margin:0;
  padding:16px 18px;
  border-radius:var(--r);
  background:var(--terminal);
  color:var(--terminal-text);
  font:500 13px/1.8 var(--font-mono);
  box-shadow:var(--shadow-deep);
  overflow-x:auto;
  max-width:100%;
}
.ip-code code{font-size:13px}

/* ------------------------------------------------------------------- faq */
.ip-faq{max-width:64em}

/* -------------------------------------------------- float cta (page icon) */
/* 本页悬浮 CTA 使用品牌闪电图标,替换共享组件的状态圆点 */
.float-cta::before{content:none}
.float-cta svg{flex:none}

/* -------------------------------------------------------------- responsive */
@media (max-width:960px){
  .ip-layout{grid-template-columns:1fr}
  .ip-dns{grid-template-columns:1fr;gap:22px}
  .ip-hero{padding:40px 0 36px}
}
@media (max-width:640px){
  .ip-row{grid-template-columns:1fr;gap:4px}
  .ip-hero__facts{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .ip-status[data-state="loading"]::before{animation:none;opacity:.9}
}