.page-main,.query-panel,.state-panel,.ping-hero,.info-grid { min-width:0; }
html { overflow-x:hidden; }
.tool-hero { text-align:center; padding:2.25rem 0 2.2rem; animation:pr .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; }
.query-panel { padding:clamp(1.2rem,2.6vw,1.8rem); border-color:rgba(255,255,255,.84); border-radius:1rem; box-shadow:0 14px 38px -25px rgba(15,23,42,.35),0 16px 42px -32px rgba(13,148,136,.55); animation:pr .7s 90ms var(--ease-standard) both; }
.query-form { display:grid; grid-template-columns:1fr auto; gap:var(--space-3); align-items:start; }
.query-form .field-message { grid-column:1/-1; margin-bottom:-.2rem; }
.query-form .field { min-height:3.5rem; width:100%; }
.node-notice { margin:var(--space-3) 0 0; padding:.65rem .8rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:rgba(248,250,252,.72); color:var(--color-muted); font-size:.8rem; line-height:1.6; }

.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:pr .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-empty,.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:se .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); }

.ping-hero { display:flex; align-items:center; gap:var(--space-5); padding:var(--space-4) 0; border-bottom:1px solid var(--color-border); margin-bottom:1rem; flex-wrap:wrap; }
.ping-status { display:flex; flex-direction:column; gap:var(--space-2); align-items:center; min-width:7rem; }
.ping-reachable { font-size:1.6rem; font-weight:800; }
.ping-reachable.ok { color:var(--color-success); }
.ping-reachable.fail { color:var(--color-danger); }
.ping-avg { font-size:1.1rem; color:var(--color-ink-soft); }
.ping-detail { flex:1; min-width:0; }
.ping-detail .target { font-size:1.05rem; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; word-break:break-all; overflow-wrap:anywhere; color:var(--color-ink-soft); }
.ping-detail .dns { font-size:.8rem; color:var(--color-muted); margin-top:.2rem; }

.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:.55rem .75rem; background:rgba(255,255,255,.78); }
.info-item:hover { background:rgba(240,253,250,.78); }
.info-label { display:block; margin-bottom:.1rem; color:var(--color-faint); font-size:.7rem; font-weight:700; }
.info-value { margin:0; overflow-wrap:anywhere; color:var(--color-ink-soft); font-size:.84rem; word-break:break-all; }
.info-mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.8rem; }

.ping-resp-list { display:grid; gap:var(--space-2); margin-bottom:var(--space-5); }
.ping-resp { display:flex; align-items:center; gap:var(--space-3); padding:.5rem .7rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:rgba(255,255,255,.55); font-size:.84rem; }
.ping-resp .seq { font-weight:700; min-width:2.5rem; }
.ping-resp .latency { margin-left:auto; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.ping-resp .latency.timeout { color:var(--color-faint); }

.workspace-actions-secondary { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; border-top:1px solid var(--color-border); padding-top:var(--space-4); margin-top:var(--space-4); }
.workspace-actions-secondary .button svg { width:1.15em; height:1.15em; }
.privacy-note { margin:var(--space-5) 0 0; color:var(--color-muted); font-size:.82rem; }

@keyframes pr { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes se { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:720px) {
  .tool-hero{padding-top:1.8rem} .query-form{grid-template-columns:1fr} .query-form .button{width:100%}
  .info-grid{grid-template-columns:repeat(2,1fr)} .ping-hero{flex-direction:column;align-items:flex-start}
}
@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} .ping-reachable{font-size:1.3rem} .info-item{padding:.45rem .55rem}
}