/* ==========================================================================
   VPNUJ — iplookup.css
   我的 IP 查询页专属样式:页头装饰弧、结果卡、结果解读分栏、DNS 自查、
   隐私提示。全部取值引用 base.css 的设计令牌,不新增硬编码颜色。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页头
   -------------------------------------------------------------------------- */

.ipx-hero{
  position:relative;
  max-width:100%;
  overflow-x:clip;
  padding-block:36px 4px;
}

.ipx-arc{
  position:absolute;
  top:16px;
  right:var(--gutter);
  width:min(260px,22%);
  height:auto;
  pointer-events:none;
  opacity:.55;
}

.ipx-stop-a{stop-color:var(--accent);stop-opacity:.85;}
.ipx-stop-b{stop-color:var(--space-blue);stop-opacity:.55;}

.ipx-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  max-width:860px;
}

.ipx-title{
  font-size:clamp(32px,4.4vw,54px);
  line-height:1.1;
  letter-spacing:-.03em;
}

.ipx-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}

/* --------------------------------------------------------------------------
   2. 结果区布局
   -------------------------------------------------------------------------- */

.ipx-result-grid{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.ipx-result-grid > *{min-width:0;}

/* --------------------------------------------------------------------------
   3. 结果卡
   -------------------------------------------------------------------------- */

.ipx-card{overflow:hidden;}

.ipx-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  padding:18px 24px;
  border-bottom:1px solid var(--border);
}

.ipx-card-head h2{
  font-size:18px;
  letter-spacing:-.01em;
}

.ipx-card-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.ipx-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
}

.ipx-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex:none;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--halo-accent);
}

.ipx-dot.is-ok{background:var(--success);box-shadow:none;}
.ipx-dot.is-warn{background:var(--warn);box-shadow:none;}
.ipx-dot.is-err{background:var(--error);box-shadow:none;}

.ipx-ip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  padding:22px 24px 20px;
}

.ipx-ip-label{
  flex:0 0 100%;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-soft);
}

.ipx-ip-value{
  flex:1 1 220px;
  min-width:0;
  font-family:var(--font-mono);
  font-size:clamp(22px,3.2vw,34px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--text);
  overflow-wrap:anywhere;
}

.ipx-ip-value.is-muted{
  color:var(--text-muted);
  font-weight:600;
}

.ipx-copy{flex:none;}

.ipx-rows{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 28px;
  margin:0;
  padding:0 24px;
  border-top:1px solid var(--border);
}

.ipx-rows > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:14px 0;
  border-bottom:1px dashed var(--border);
}

.ipx-rows dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--text-soft);
}

.ipx-rows dd{
  margin:0;
  font-size:14.5px;
  line-height:1.45;
  color:var(--text);
  overflow-wrap:anywhere;
}

.ipx-rows dd.is-muted{color:var(--text-muted);}
.ipx-rows dd.is-flag{color:var(--accent-dark);font-weight:600;}

.ipx-note{
  padding:14px 24px 18px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.65;
  color:var(--text-soft);
}

/* --------------------------------------------------------------------------
   4. 侧栏说明卡
   -------------------------------------------------------------------------- */

.ipx-side h2{
  font-size:17px;
  line-height:1.3;
  margin-bottom:12px;
}

.ipx-side-list{
  display:grid;
  gap:10px;
}

.ipx-side-list li{
  position:relative;
  padding-left:16px;
  font-size:13px;
  line-height:1.65;
  color:var(--text-muted);
}

.ipx-side-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
}

.ipx-side-list strong{
  color:var(--text);
  font-weight:600;
}

.ipx-side-note{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.6;
  color:var(--text-soft);
}

.ipx-side-note a{
  color:var(--accent-dark);
  text-underline-offset:2px;
}

/* --------------------------------------------------------------------------
   5. 解读分栏
   -------------------------------------------------------------------------- */

.ipx-split{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
}

.ipx-split > *{min-width:0;}

.ipx-prose{max-width:none;}
.ipx-prose h2{margin-top:0;}

/* --------------------------------------------------------------------------
   6. 步骤与要点列表
   -------------------------------------------------------------------------- */

.ipx-steps{
  display:grid;
  gap:12px;
  margin-top:12px;
  counter-reset:ipx-step;
}

.ipx-steps li{
  position:relative;
  padding-left:34px;
  counter-increment:ipx-step;
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-muted);
}

.ipx-steps li::before{
  content:counter(ipx-step);
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1;
  color:var(--accent-dark);
}

.ipx-bullets{
  display:grid;
  gap:9px;
  margin-top:12px;
}

.ipx-bullets li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-muted);
}

.ipx-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:5px;
  height:1px;
  background:var(--accent);
}

/* --------------------------------------------------------------------------
   7. DNS 自查面板
   -------------------------------------------------------------------------- */

.ipx-dns .panel-body{padding:clamp(20px,3vw,32px);}

.ipx-dns h2{margin-bottom:12px;}

.ipx-dns-lede{
  max-width:70ch;
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
}

.ipx-dns-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 32px;
  margin-top:22px;
}

.ipx-dns-grid > *{min-width:0;}

.ipx-dns-grid h3{
  font-size:15px;
  margin-bottom:2px;
}

.ipx-dns .callout a{
  color:var(--accent-dark);
  text-underline-offset:2px;
}

/* --------------------------------------------------------------------------
   8. 隐私提示
   -------------------------------------------------------------------------- */

.ipx-privacy{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding:clamp(20px,3vw,30px);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
}

.ipx-privacy > *{min-width:0;}

.ipx-privacy h2{
  margin:10px 0 10px;
  font-size:clamp(20px,2.2vw,24px);
}

.ipx-privacy p{
  max-width:62ch;
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.ipx-privacy-list{
  display:grid;
  gap:10px;
}

.ipx-privacy-list li{
  position:relative;
  padding-left:18px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-muted);
}

.ipx-privacy-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
}

/* --------------------------------------------------------------------------
   9. 复制兜底用的临时输入框
   -------------------------------------------------------------------------- */

.ipx-copy-area{
  position:fixed;
  top:0;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   10. 响应式
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
  .ipx-arc{display:none;}
}

@media (max-width:1080px){
  .ipx-result-grid{grid-template-columns:minmax(0,1fr);}
  .ipx-split{grid-template-columns:minmax(0,1fr);}
  .ipx-privacy{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:760px){
  .ipx-hero{padding-block:22px 2px;}
  .ipx-dns-grid{grid-template-columns:minmax(0,1fr);gap:20px;}
}

@media (max-width:640px){
  .ipx-title{font-size:30px;}
  .ipx-card-head{padding:16px 18px;}
  .ipx-ip{padding:18px;}
  .ipx-rows{grid-template-columns:minmax(0,1fr);padding-inline:18px;gap:0;}
  .ipx-note{padding:12px 18px 16px;}
  .ipx-copy{width:100%;}
}