/* ==========================================================================
   VPNAY — iplookup.css（IP 查询页专属样式）
   仅本页使用。颜色、圆角、阴影一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ---------- 页头 ---------- */
.ip-head{
  padding-top:56px;
  padding-bottom:8px;
  background:linear-gradient(180deg,var(--accent-08) 0%,transparent 100%);
}
.ip-head .lead{max-width:46em;margin-top:16px}
.ip-head .chip-row{margin-top:20px}

/* ---------- 结果卡 ---------- */
.ip-tool{
  position:relative;
  min-width:0;
  padding:24px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-panel);
}
.ip-tool-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 20px}
.ip-tool-head > div{min-width:0}
.ip-tool-head .btn{margin-left:auto}
.ip-tool-title{margin-top:8px;font-size:22px}

.ip-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
.ip-status i{
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--muted);
}
.ip-tool[data-state="loading"] .ip-status i{background:var(--warn);animation:ip-pulse 1.6s ease-in-out infinite}
.ip-tool[data-state="ok"] .ip-status i{background:var(--success)}
.ip-tool[data-state="error"] .ip-status i{background:var(--error)}

@keyframes ip-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.45}
}

.ip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin:18px 0 0;
}
.ip-field{
  min-width:0;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg);
}
.ip-field dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
}
.ip-field dd{
  margin:8px 0 0;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.ip-field dd.mono{font-size:17px;letter-spacing:-.01em}
.ip-field[data-tone="ok"] dd{color:var(--success)}
.ip-field[data-tone="warn"] dd{color:var(--warn)}

.ip-copy{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px dashed var(--border-strong);
}
.ip-copy-note{min-height:1.4em;font-size:12.5px;color:var(--muted)}
.ip-copy-note.is-done{color:var(--success);font-weight:600}
.ip-hint{margin-top:14px;max-width:60em;font-size:13px;line-height:1.7;color:var(--muted)}

/* 复制兜底用的离屏输入区（fixed 定位，不参与文档流） */
.ip-copy-proxy{
  position:fixed;
  top:0;
  left:-9999px;
  opacity:0;
  pointer-events:none;
}

/* ---------- 结果解读格 ---------- */
.ip-notes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:0;
}
.ip-note{
  min-width:0;
  padding:20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.ip-note-h{display:flex;align-items:center;gap:10px}
.ip-note-h b{
  flex-shrink:0;
  display:inline-grid;
  place-items:center;
  min-width:30px;
  height:22px;
  padding:0 6px;
  border-radius:var(--r-sm);
  background:var(--accent-08);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
}
.ip-note h3{font-size:15.5px}
.ip-note p{margin-top:10px;font-size:14px;line-height:1.75;color:var(--muted)}

/* ---------- DNS 自查区 ---------- */
.ip-check{display:grid;gap:22px;margin-top:0}

/* 本页表格是长句说明型，覆盖 base 的 keep-all，让中文正常折行 */
.ip-check .data-table td{word-break:normal;overflow-wrap:break-word}

/* ---------- 相关页面 ---------- */
.ip-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .ip-head{padding-top:40px}
  .ip-tool{padding:20px}
  .ip-tool-head .btn{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .ip-tool[data-state="loading"] .ip-status i{animation:none}
}