/* ==========================================================================
   VPNDQ — iplookup.css
   我的 IP 页：出口 IP 结果卡（窗口 chrome）、结果解读网格、
   DNS 自查步骤条、隐私提示与页内小注。
   所有颜色 / 圆角 / 阴影一律引用 base.css 的 :root 设计令牌。
   ========================================================================== */

/* ---------- 首屏 ---------- */
.ip-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  background:linear-gradient(180deg,var(--bg-hero-top) 0%,var(--bg) 100%);
}
.ip-hero::before{
  content:"";
  position:absolute;left:50%;top:-70px;z-index:0;
  width:min(780px,94vw);height:340px;
  transform:translateX(-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,var(--gold-16) 0%,transparent 72%);
}
.ip-hero .wrap{position:relative;z-index:1}
.ip-hero__head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:760px;margin-inline:auto;
}
.ip-hero__head .h1{margin-top:14px}
.ip-hero__head .sub{max-width:620px}
.ip-hero__head .fact-row{margin-top:22px;justify-content:center}
.ip-hero__tools{max-width:780px;margin:32px auto 0}

/* ---------- 结果卡（窗口 chrome） ---------- */
.ipcard{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--white);
  overflow:hidden;
}
.ipcard__bar{
  display:flex;align-items:center;gap:10px;
  height:46px;padding:0 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.ipcard__dots{display:flex;gap:6px;flex:none}
.ipcard__dots span{width:10px;height:10px;border-radius:50%;flex:none}
.ipcard__dots span:nth-child(1){background:var(--err)}
.ipcard__dots span:nth-child(2){background:var(--warn)}
.ipcard__dots span:nth-child(3){background:var(--ok)}
.ipcard__path{
  flex:1 1 auto;min-width:0;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ipcard__refresh{
  flex:none;
  display:inline-flex;align-items:center;gap:6px;
  min-height:30px;padding:0 13px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:700;color:var(--accent);
  background:var(--panel);border:1px solid var(--line);
  transition:background .15s,transform .15s;
}
.ipcard__refresh:hover{background:var(--rose);transform:translateY(-1px)}
.ipcard__refresh svg{width:13px;height:13px;flex:none;transform-origin:center}
.ipcard.is-loading .ipcard__refresh svg{animation:ip-spin 1s linear infinite}

.ipcard__body{padding:22px 22px 18px}
.ipcard__iprow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ipcard__ipcol{flex:1 1 240px;min-width:0}
.ipcard__label{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.ipcard__ip{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:clamp(23px,4.2vw,33px);
  font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--ink);
  overflow-wrap:anywhere;word-break:break-all;
}
.ipcard__copy{flex:none}
.ipcard__copy.is-done{border-color:var(--ok);color:var(--ok);background:var(--panel)}

.ipcard__grid{margin-top:20px;border-top:1px solid var(--line-soft)}
.ipcard__row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.ipcard__row:last-child{border-bottom:0}
.ipcard__k{flex:none;font-size:13.5px;color:var(--muted)}
.ipcard__v{
  min-width:0;text-align:right;
  font-size:14.5px;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere;
}
.ipcard__status{
  margin-top:14px;
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 13px;border-radius:var(--r-sm);
  background:var(--panel-3);
  font-size:12.5px;line-height:1.65;color:var(--muted);
}
.ipcard__dot{
  flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-top:5px;
}
.ipcard.is-ok .ipcard__dot{background:var(--ok)}
.ipcard.is-error .ipcard__dot{background:var(--err)}
.ipcard.is-error .ipcard__status{color:var(--err)}
.ipcard.is-loading .ipcard__dot{animation:ip-pulse 1.3s ease-in-out infinite}

@keyframes ip-spin{to{transform:rotate(360deg)}}
@keyframes ip-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- 结果解读 ---------- */
.ip-read{margin-top:30px}

/* ---------- DNS 自查 ---------- */
.ip-dns{margin-top:30px;display:grid;gap:20px}
.ip-steps{display:grid;gap:12px;counter-reset:ipstep}
.ip-steps li{
  counter-increment:ipstep;
  position:relative;
  padding:15px 20px 15px 56px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  font-size:14.5px;line-height:1.75;color:var(--ink);
}
.ip-steps li::before{
  content:counter(ipstep);
  position:absolute;left:17px;top:15px;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent) 0%,var(--accent-dark) 100%);
  color:var(--white);
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  box-shadow:inset 0 1px 0 var(--chrome-hi);
}

/* ---------- 隐私提示 ---------- */
.ip-privacy .callout a{
  color:var(--accent);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- 页内小注 ---------- */
.ip-note{margin-top:18px;font-size:14px;line-height:1.75;color:var(--muted)}
.ip-note a{
  color:var(--accent);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- 复制兜底用的离屏输入槽 ---------- */
.ip-copy-proxy{
  position:fixed;left:-9999px;top:0;
  width:1px;height:1px;opacity:0;pointer-events:none;
}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .ip-hero::before{height:240px;top:-50px}
  .ip-hero__tools{margin-top:26px}
}
@media (max-width:640px){
  .ipcard__body{padding:18px 16px 15px}
  .ipcard__iprow{gap:12px}
  .ipcard__copy{width:100%}
  .ipcard__row{flex-direction:column;align-items:flex-start;gap:5px}
  .ipcard__v{text-align:left}
  .ip-steps li{padding:50px 16px 15px}
  .ip-steps li::before{top:14px;left:16px}
}