/* ========== IP ========== */
.ip-wrap{padding:clamp(1.2rem,3vw,2.2rem);border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(12,12,20,.94),rgba(16,16,28,.92));border:1px solid var(--line-strong)}
html[data-theme="light"] .ip-wrap{background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(240,242,252,.92))}
.ip-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:32px 32px;opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 80%)}
.ip-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  flex-wrap:wrap;margin-bottom:1.2rem;z-index:1}
.ip-status{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ip-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;position:relative;flex:none}
.ip-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #4ade80;opacity:.5;
  animation:ipPing 1.8s ease-out infinite}
@keyframes ipPing{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
.ip-status.is-loading .ip-dot{background:#fbbf24;box-shadow:0 0 10px #fbbf24}
.ip-status.is-error .ip-dot{background:#f87171;box-shadow:0 0 10px #f87171}
.ip-labels{display:flex;gap:.4rem;flex-wrap:wrap}
.ip-chip{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:999px;border:1px solid var(--line);color:var(--ink-3);
  background:rgba(255,255,255,.02);white-space:nowrap}
.ip-display{position:relative;z-index:1;padding:1.2rem 0 1rem;text-align:center;min-height:100px;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.05rem;
  font-family:var(--font-mono);font-weight:600;font-size:clamp(1.3rem,5.5vw,3rem);
  letter-spacing:.04em;line-height:1;direction:ltr}
.ip-cell{display:inline-block;min-width:.6em;text-align:center;
  color:var(--ink);text-shadow:0 0 20px rgba(139,108,255,.3);
  transition:transform .5s var(--ease-spring),color .3s}
.ip-cell.is-dot{color:var(--ink-3);min-width:.35em}
.ip-cell.is-locked{animation:ipLock .5s var(--ease-spring)}
@keyframes ipLock{0%{transform:scale(1.4);color:var(--accent);text-shadow:0 0 30px var(--accent)}100%{transform:scale(1)}}
.ip-display.is-loading .ip-cell{color:var(--ink-3);opacity:.7}
.ip-error{font-family:var(--font-sans);font-size:.95rem;color:#f87171;direction:inherit;
  display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.ip-scan{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:ipScan 2.4s ease-in-out infinite;z-index:1;opacity:0;transition:opacity .4s}
.ip-wrap.is-scanning .ip-scan{opacity:1}
@keyframes ipScan{0%{top:0}50%{top:100%}100%{top:0}}
.ip-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid var(--line)}
.ip-meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-3)}
.ip-actions{display:flex;gap:.4rem;flex-wrap:wrap}
@media (max-width:480px){ .ip-bottom{flex-direction:column;align-items:stretch} .ip-actions .btn{flex:1} }

/* /ip component · responsive tuning */
.ip-display{word-break:break-word;max-width:100%}
@media (max-width:560px){
  .ip-display{font-size:clamp(1rem,6vw,1.6rem);letter-spacing:0;gap:0;min-height:72px}
  .ip-cell{min-width:.55em}
  .ip-cell.is-dot{min-width:.25em}
  .ip-top{gap:.45rem}
  .ip-labels{gap:.3rem}
  .ip-chip{font-size:.58rem;padding:.2rem .42rem}
  .ip-meta{font-size:.62rem}
}
@media (max-width:380px){
  .ip-actions{flex-direction:column}
  .ip-actions .btn{width:100%}
}