html { overflow-x:hidden; }

.page-main,
.state-panel,
.ip-hero,
.info-grid {
  min-width:0;
}

.tool-hero { text-align:center; padding:2.25rem 0 2.2rem; animation:mi-reveal .68s var(--ease-standard) both; }
.tool-hero h1 { position:relative; margin-bottom:.75rem; font-size:clamp(2.15rem,4vw,3rem); line-height:1.1; letter-spacing:-.045em; }
.tool-hero h1::after { position:absolute; z-index:-1; right:15%; bottom:-.1rem; width:38%; height:1rem; border-radius:50%; background:linear-gradient(90deg,rgba(20,184,166,.18),rgba(59,130,246,.22)); content:""; filter:blur(14px); }
.tool-hero p { max-width:42rem; margin:0 auto; color:var(--color-muted); font-size:.9rem; }

.state-panel { position:relative; min-height:15rem; padding:clamp(1.2rem,2.6vw,1.8rem); overflow:hidden; border-color:rgba(255,255,255,.84); border-radius:1rem; box-shadow:0 18px 48px -34px rgba(15,23,42,.38); animation:mi-reveal .72s 170ms var(--ease-standard) both; margin-top:var(--space-6); }
.state-panel::before { position:absolute; z-index:-1; top:-9rem; right:-8rem; width:20rem; height:20rem; border-radius:50%; background:rgba(59,130,246,.1); content:""; filter:blur(42px); pointer-events:none; }
.state-loading,.state-error { display:grid; min-height:13rem; place-content:center; justify-items:center; gap:var(--space-3); color:var(--color-muted); text-align:center; animation:state-enter .34s var(--ease-standard) both; }
.state-illustration { display:grid; width:3.4rem; height:3.4rem; place-items:center; color:var(--color-brand); border-radius:50%; background:var(--color-brand-soft); }
.state-error .state-illustration { color:var(--color-danger); background:var(--color-danger-soft); }

.ip-hero { display:flex; align-items:center; gap:var(--space-5); padding:var(--space-4) 0; border-bottom:1px solid var(--color-border); margin-bottom:1.2rem; flex-wrap:wrap; }
.ip-display { max-width:100%; font-size:2.8rem; font-weight:800; line-height:1.1; letter-spacing:-.04em; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--color-ink); overflow-wrap:anywhere; word-break:break-all; }
.ip-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.ip-actions .button { min-height:2.6rem; padding:.45rem .9rem; font-size:.85rem; }
.ip-meta { margin-top:var(--space-2); color:var(--color-muted); font-size:.84rem; display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; }
.ip-meta-tag { display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:999px; font-size:.78rem; font-weight:700; }
.ip-meta-tag.public { background:var(--color-success-soft); color:var(--color-success); }
.ip-meta-tag.local { background:var(--color-warning-soft); color:var(--color-warning); }
.ip-meta-tag.proxy { background:var(--color-accent-soft); color:var(--color-accent); }

.info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:var(--color-border); margin-bottom:var(--space-5); }
.info-item { min-width:0; padding:.65rem .85rem; background:rgba(255,255,255,.78); }
.info-item:hover { background:rgba(240,253,250,.78); }
.info-label { display:block; margin-bottom:.15rem; color:var(--color-faint); font-size:.72rem; font-weight:700; }
.info-value { margin:0; overflow-wrap:anywhere; color:var(--color-ink-soft); font-size:.86rem; word-break:break-all; }
.info-mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82rem; }

.local-notice { padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-md); text-align:center; background:rgba(248,250,252,.7); color:var(--color-muted); font-size:.9rem; line-height:1.6; margin-bottom:var(--space-5); }
.local-notice strong { color:var(--color-warning); }

.location-note { margin:var(--space-5) 0 0; padding:.7rem 1rem; border:1px solid #fde68a; border-radius:var(--radius-md); background:var(--color-warning-soft); color:var(--color-warning); font-size:.82rem; }

.privacy-note { margin:var(--space-5) 0 0; color:var(--color-muted); font-size:.82rem; }
.copy-feedback { min-height:1.25rem; margin:.65rem 0 0; color:var(--color-muted); font-size:.8rem; }

@keyframes mi-reveal { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes state-enter { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:720px) {
  .tool-hero{padding-top:1.8rem} .info-grid{grid-template-columns:repeat(2,1fr)}
  .ip-display{font-size:2rem} .ip-hero{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
}
@media (max-width:560px) {
  .tool-hero{padding-top:1.25rem} .tool-hero h1{font-size:2.25rem} .info-grid{grid-template-columns:1fr}
}
@media (max-width:390px) {
  .state-panel{padding:1rem} .ip-display{font-size:1.6rem} .info-item{padding:.5rem .6rem}
}