/* =========================================================================
   VPNWu — iplookup.css
   网络检测页专属样式:结果卡 / 字段格 / 状态胶囊 / 命令清单 / 隐私块
   全部取值走 base.css 的 :root 令牌,不新增硬编码颜色
   ========================================================================= */

/* --------------------------------------------------------------- 结果卡 */
.ip-tool{padding:26px 26px 22px}
.ip-tool-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ip-tool-head h2{font-size:19px;line-height:1.4;letter-spacing:-.01em}
.ip-tool-sub{margin-top:8px;max-width:660px;font-size:14px;line-height:1.7;color:var(--muted)}

/* 状态胶囊:等待 / 检测中 / 完成 / 失败 */
.ip-state{
  display:inline-flex;align-items:center;gap:7px;
  max-width:100%;overflow:hidden;
  min-height:26px;padding:3px 11px;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--bg-panel-2);color:var(--muted);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;text-overflow:ellipsis;
}
.ip-state::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--border-strong);
}
.ip-state[data-state="loading"]{
  color:var(--accent-dark);background:var(--accent-wash);border-color:var(--accent-wash-2);
}
.ip-state[data-state="loading"]::before{background:var(--accent);animation:ip-breathe 1.4s ease-in-out infinite}
.ip-state[data-state="ok"]{color:var(--success);background:var(--success-wash);border-color:transparent}
.ip-state[data-state="ok"]::before{background:var(--success);box-shadow:0 0 0 3px var(--success-wash)}
.ip-state[data-state="error"]{color:var(--error);background:var(--error-wash);border-color:transparent}
.ip-state[data-state="error"]::before{background:var(--error);box-shadow:0 0 0 3px var(--error-wash)}

@keyframes ip-breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* 字段格:出口 IP 独占一行,其余三格并排 */
.ip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.ip-cell{
  min-width:0;padding:14px 16px;
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
}
.ip-cell--lead{
  grid-column:1 / -1;
  background:var(--bg-panel);
  border-color:var(--border);
  box-shadow:inset 3px 0 0 var(--accent);
}
.ip-cell dt{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.ip-cell dd{
  margin:6px 0 0;
  font-size:17px;font-weight:700;line-height:1.45;letter-spacing:-.01em;
  color:var(--ink);
  overflow-wrap:anywhere;word-break:break-word;
}
.ip-cell--lead dd{font-size:22px;letter-spacing:-.02em}
.ip-cell dd.is-empty{font-weight:500;font-size:15px;color:var(--muted)}

/* 操作行 */
.ip-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.ip-actions .btn{flex-shrink:0;white-space:nowrap}

/* 状态提示行 */
.ip-message{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--border-soft);
  font-size:13.5px;line-height:1.75;color:var(--muted);
}
.ip-message[data-tone="ok"]{color:var(--success)}
.ip-message[data-tone="error"]{color:var(--error)}

/* 复制失败时的临时取词框,不可见也不占位 */
.ip-copy-src{
  position:fixed;top:0;left:0;
  width:1px;height:1px;
  padding:0;border:0;opacity:0;
  font-size:1px;color:transparent;background:transparent;
  pointer-events:none;
}

/* ------------------------------------------------------------ DNS 命令清单 */
.dns-cmds{display:grid;gap:10px;margin-top:14px}
.dns-cmd{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  min-width:0;padding:11px 14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.dns-cmd .os{
  flex:none;min-width:66px;
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);
}
.dns-cmd code{
  font-size:13.5px;color:var(--ink);
  padding:2px 8px;
  border-radius:var(--r-xs);
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
}
.dns-cmd .note{min-width:0;font-size:13px;line-height:1.6;color:var(--muted)}

/* -------------------------------------------------------------- 隐私说明块 */
.privacy-panel{padding:28px 26px}
.privacy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;margin-top:20px}
.privacy-item{
  display:flex;align-items:flex-start;gap:10px;
  min-width:0;
  font-size:15px;line-height:1.75;color:var(--muted);
}
.privacy-item .tick{margin-top:6px}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:900px){
  .ip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-cell--lead{grid-column:1 / -1}
  .ip-cell:last-child{grid-column:1 / -1}
  .privacy-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  .ip-tool{padding:20px 16px 18px}
  .ip-grid{grid-template-columns:minmax(0,1fr)}
  .ip-cell--lead{grid-column:auto}
  .ip-cell:last-child{grid-column:auto}
  .ip-cell--lead dd{font-size:19px}
  .privacy-panel{padding:22px 18px}
  .dns-cmd .os{min-width:0}
}