/* ==========================================================================
   VPNGive — IP lookup page (zh-CN/ip.html)
   Page-scoped only. Colors, radii and shadows come from :root tokens.
   ========================================================================== */

/* ----------------------------------------------------------------- hero --- */
.ip-hero{position:relative;overflow-x:clip;padding-top:54px;padding-bottom:8px}
.ip-hero::before{
  content:"";position:absolute;top:-26px;right:0;width:min(420px,46%);height:220px;
  background-image:repeating-linear-gradient(90deg,var(--beam-cyan-mid) 0 6px,transparent 6px 24px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 94%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 94%);
  pointer-events:none;z-index:0;
}
.ip-hero > *{position:relative;z-index:1}
.ip-hero h1{margin-top:14px}
.ip-lede{margin-top:16px;max-width:660px;font-size:15.5px;line-height:1.8;color:var(--muted)}
.ip-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* --------------------------------------------------------------- lookup --- */
.ip-lookup{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:16px;align-items:start;margin-top:24px;
}
.ip-card{min-width:0}
.ip-rows{margin-top:14px;border-top:1px solid var(--border)}
.ip-row{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.ip-row:last-child{border-bottom:0;padding-bottom:0}
.ip-key{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted)}
.ip-val{
  font-size:14.5px;line-height:1.6;color:var(--ink);
  min-width:0;overflow-wrap:anywhere;word-break:break-word;
}
.ip-val.is-mono{font-family:var(--font-mono);font-size:13.5px;letter-spacing:.02em}

.ip-state{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink)}
.ip-state::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--border)}
.ip-state[data-tone="ok"]::before{background:var(--ok)}
.ip-state[data-tone="warn"]::before{background:var(--warn)}
.ip-state[data-tone="err"]::before{background:var(--err)}
.ip-state[data-tone="idle"]{color:var(--muted)}

.ip-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ip-status{
  margin-top:12px;min-height:18px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--muted);
}
.ip-status[data-tone="ok"]{color:var(--ok)}
.ip-status[data-tone="err"]{color:var(--err)}
.ip-noscript{margin-top:10px;font-size:13px;line-height:1.7;color:var(--warn)}
.ip-copy-buffer{position:fixed;top:0;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- aside --- */
.ip-aside{display:flex;flex-direction:column;gap:12px;min-width:0}
.ip-aside-title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent)}
.ip-aside-text{margin-top:12px;font-size:13.5px;line-height:1.75;color:var(--muted)}
.ip-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;font-size:13.5px;line-height:1.72;color:var(--muted)}
.ip-list li{display:flex;gap:9px;min-width:0}
.ip-list li::before{
  content:"";flex:0 0 5px;width:5px;height:5px;margin-top:8px;
  border-radius:50%;background:var(--accent);
}

/* --------------------------------------------------------------- legend --- */
.ip-legend{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin-top:26px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
}
.ip-legend-item{background:var(--panel);padding:20px;min-width:0}
.ip-legend-item .ip-legend-key{
  margin-top:0;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--accent);
}
.ip-legend-item h3{margin-top:9px;font-size:16px}
.ip-legend-item p{margin-top:8px;font-size:13.8px;line-height:1.78;color:var(--muted)}

/* ---------------------------------------------------------------- steps --- */
.ip-steps{margin-top:22px;border-top:1px solid var(--border)}
.ip-step{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;
  padding:18px 0;border-bottom:1px solid var(--border);min-width:0;
}
.ip-step-no{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--accent);padding-top:4px;
}
.ip-step h3{font-size:16px}
.ip-step p{margin-top:6px;max-width:680px;font-size:14px;line-height:1.78;color:var(--muted)}
.ip-step code{
  padding:1px 5px;border-radius:var(--r-xs);
  background:var(--panel-2);font-size:12.5px;color:var(--ink);
}

/* ---------------------------------------------------------------- notes --- */
.ip-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;margin-top:22px}
.ip-note{display:flex;gap:10px;min-width:0;font-size:13.8px;line-height:1.75;color:var(--muted)}
.ip-note::before{
  content:"";flex:0 0 6px;width:6px;height:6px;margin-top:9px;
  border-radius:2px;background:var(--accent-line);
}
.ip-note b{display:block;margin-bottom:3px;font-size:14px;color:var(--ink)}

/* -------------------------------------------------------------- privacy --- */
.ip-privacy{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:24px;align-items:start;padding:24px;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--panel);box-shadow:var(--shadow-card);
}
.ip-privacy h2{margin-top:12px}
.ip-privacy-text{margin-top:12px;max-width:560px;font-size:14px;line-height:1.8;color:var(--muted)}
.ip-privacy-list{display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.ip-privacy-list li{padding-bottom:10px;border-bottom:1px solid var(--border);min-width:0}
.ip-privacy-list li:last-child{padding-bottom:0;border-bottom:0}
.ip-privacy-list strong{display:block;margin-bottom:2px;font-size:13.5px;color:var(--ink)}

/* ----------------------------------------------------------- responsive --- */
@media (max-width:960px){
  .ip-lookup{grid-template-columns:1fr}
  .ip-privacy{grid-template-columns:1fr;gap:18px}
}
@media (max-width:760px){
  .ip-hero{padding-top:38px}
  .ip-hero::before{display:none}
  .ip-legend{grid-template-columns:1fr}
  .ip-notes{grid-template-columns:1fr}
  .ip-row{grid-template-columns:96px minmax(0,1fr);gap:10px}
  .ip-step{grid-template-columns:32px minmax(0,1fr);gap:12px}
  .ip-privacy{padding:20px}
  .ip-legend-item{padding:18px}
}
@media (max-width:400px){
  .ip-row{grid-template-columns:1fr;gap:3px}
  .ip-key{font-size:10px}
}