/* =========================================================================
   VPNLW — iplookup.css
   Page layer for zh-CN/check-ip.html: result card, side notes,
   interpretation grid, DNS self-check steps, next-step line.
   Every colour / radius / shadow comes from the :root tokens in base.css.
   ========================================================================= */

/* ------------------------------------------------------------- page head */
.ip-head-sec{position:relative;overflow-x:clip}
.ip-head-sec .wrap{position:relative;z-index:1}

.ip-decor{
  position:absolute;
  top:-48px;
  right:-80px;
  width:min(520px,74vw);
  height:min(340px,42vh);
  background:radial-gradient(50% 50% at 50% 50%,var(--glow) 0%,transparent 72%);
  pointer-events:none;
  z-index:0;
}

.ip-head{max-width:720px;min-width:0}
.ip-head h1{margin-top:6px;font-size:clamp(2rem,4.4vw,2.9rem)}
.ip-head .lede{max-width:58ch}

.ip-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  margin-top:18px;
  font-size:12.5px;
  color:var(--text-muted);
}
.ip-trust li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.ip-trust svg{width:13px;height:13px;color:var(--accent);opacity:.8;flex:none}

/* -------------------------------------------------------- result grid */
.ip-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
  margin-top:28px;
  min-width:0;
}

.ip-card{
  padding:0;
  overflow:hidden;
}

.ip-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 14px;
  padding:14px 18px;
  background:var(--grad-strip);
  color:var(--on-accent);
}
.ip-strip-label{
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--w-70);
}
.ip-strip-tag{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:var(--radius-xs);
  background:var(--bg-panel);
  color:var(--accent);
  font-size:10.5px;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 6px 14px -8px var(--shade);
}

.ip-body{padding:6px 18px 18px}

.ip-rows{display:grid;margin:0}

.ip-row{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:12px;
  align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.ip-row dt{
  margin:0;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-muted);
}
.ip-row dd{margin:0;min-width:0}

.ip-val{
  display:inline-block;
  max-width:100%;
  font-size:14.5px;
  line-height:1.5;
  color:var(--accent-dark);
  overflow-wrap:anywhere;
}
.ip-val.mono{
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--accent);
}

.ip-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  min-height:24px;
  padding:2px 10px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:var(--accent-04);
  font-size:12px;
  line-height:1.4;
  color:var(--text);
}
.ip-pill::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--text-muted);
  flex:none;
}
.ip-pill.is-ok{
  background:var(--success-14);
  border-color:var(--success-30);
  color:var(--accent-dark);
}
.ip-pill.is-ok::before{background:var(--success)}
.ip-pill.is-warn{
  background:var(--warn-12);
  border-color:var(--warn-30);
  color:var(--accent-dark);
}
.ip-pill.is-warn::before{background:var(--warn)}

.ip-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:16px;
}
.ip-actions .btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.ip-stamp{
  margin-left:auto;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--text-muted);
}

.ip-status{
  margin-top:12px;
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
}
.ip-status.is-error{color:var(--error)}

.ip-source{
  margin-top:10px;
  font-size:11.5px;
  line-height:1.65;
  color:var(--text-muted);
}

/* ------------------------------------------------------------ side notes */
.ip-side{display:grid;gap:14px;min-width:0}

.ip-side-card{
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(180deg,var(--apricot-30),var(--bg-panel) 72%);
  box-shadow:0 1px 0 var(--w-90) inset;
  min-width:0;
}
.ip-side-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.ip-side-title svg{width:14px;height:14px;color:var(--accent);flex:none}
.ip-side-card p{
  margin:0;
  font-size:13px;
  line-height:1.72;
  color:var(--text);
}
.ip-side-card p + p{margin-top:8px}

/* --------------------------------------------------- interpretation grid */
.ip-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  min-width:0;
}
.ip-note{
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
  min-width:0;
}
.ip-note-key{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--accent);
}
.ip-note h3{
  margin:0 0 8px;
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.4;
  color:var(--accent-dark);
}
.ip-note p{
  margin:0;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ------------------------------------------------------- DNS self-check */
.ip-steps{
  display:grid;
  gap:12px;
  margin:20px 0 24px;
  padding:0;
  list-style:none;
  counter-reset:ipstep;
}
.ip-steps li{
  position:relative;
  padding-left:38px;
  font-size:14px;
  line-height:1.75;
  color:var(--text);
  min-width:0;
}
.ip-steps li::before{
  counter-increment:ipstep;
  content:counter(ipstep,decimal-leading-zero);
  position:absolute;
  left:0;
  top:1px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--accent-14);
  background:var(--accent-06);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--accent);
}

/* ---------------------------------------------------------- next step */
.ip-next{
  margin-top:24px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.ip-next a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ------------------------------------------- clipboard fallback textarea */
.ip-copy-proxy{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  padding:0;
  border:0;
  opacity:0;
}

/* --------------------------------------------------------- breakpoints */
@media (max-width:900px){
  .ip-grid{grid-template-columns:minmax(0,1fr)}
  .ip-decor{right:-120px;opacity:.7}
}

@media (max-width:768px){
  .ip-notes{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  .ip-row{grid-template-columns:88px minmax(0,1fr);gap:10px}
  .ip-body{padding:4px 14px 16px}
  .ip-strip{padding:12px 14px}
  .ip-stamp{margin-left:0;width:100%}
  .ip-val.mono{font-size:14px}
  .ip-steps li{padding-left:34px;font-size:13.5px}
}