html { overflow-x:hidden; }
.page-main,.query-panel,.state-panel,.result-grid { min-width:0; }
.tool-hero { text-align:center; padding:2.25rem 0 2.2rem; animation:tcp-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 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:tcp-reveal .7s 90ms var(--ease-standard) both; }
.query-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(8rem,.32fr) auto; gap:var(--space-3); align-items:end; }
.query-form>div { min-width:0; }
.query-form .field { width:100%; min-width:0; min-height:3.4rem; }
.query-form .button { min-height:3.4rem; }
.query-form .field-message { grid-column:1/-1; margin:0; }
.field-label { display:block; margin:0 0 .35rem; color:var(--color-muted); font-size:.8rem; font-weight:700; }
.port-shortcuts { display:flex; align-items:flex-start; gap:.6rem; margin-top:var(--space-3); color:var(--color-muted); font-size:.78rem; }
.port-shortcuts>span { padding-top:.32rem; white-space:nowrap; }
#port-shortcut-list { display:flex; flex-wrap:wrap; gap:.35rem; }
.port-shortcut { padding:.24rem .52rem; border:1px solid var(--color-border); border-radius:999px; background:#fff; color:var(--color-ink-soft); font:inherit; cursor:pointer; transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast); }
.port-shortcut:hover,.port-shortcut:focus-visible { border-color:#5eead4; background:#f0fdfa; color:var(--color-brand-strong); }
.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; }
.state-panel { position:relative; min-height:15rem; margin-top:var(--space-6); 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:tcp-reveal .72s 170ms var(--ease-standard) both; }
.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; }
.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); }
.result-hero { display:flex; align-items:center; gap:var(--space-5); padding:var(--space-4) 0; border-bottom:1px solid var(--color-border); margin-bottom:var(--space-4); flex-wrap:wrap; }
.result-status { min-width:7.5rem; font-size:1.7rem; font-weight:800; }
.result-status.open { color:var(--color-success); }
.result-status.closed { color:var(--color-danger); }
.result-status.timeout,.result-status.error { color:var(--color-warning); }
.result-target { min-width:0; flex:1; }
.result-target strong,.result-target span { display:block; overflow-wrap:anywhere; }
.result-target span { margin-top:.2rem; color:var(--color-muted); font-size:.82rem; }
.result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:var(--color-border); }
.result-item { min-width:0; padding:.65rem .8rem; background:rgba(255,255,255,.8); }
.result-label { display:block; margin-bottom:.18rem; color:var(--color-faint); font-size:.72rem; font-weight:700; }
.result-value { margin:0; overflow-wrap:anywhere; color:var(--color-ink-soft); font-size:.86rem; }
.result-mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.result-message { margin:var(--space-4) 0 0; color:var(--color-muted); font-size:.84rem; }
.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-5); }
.privacy-note { margin:var(--space-4) 0 0; color:var(--color-muted); font-size:.8rem; }
@keyframes tcp-reveal { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@media(max-width:720px){.query-form{grid-template-columns:minmax(0,1fr) 8rem}.query-form .button{grid-column:1/-1}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tool-hero{padding-top:1.25rem}.query-form{grid-template-columns:1fr}.query-form .button{grid-column:auto}.port-shortcuts{display:block}.port-shortcuts>span{display:block;margin-bottom:.4rem}.result-grid{grid-template-columns:1fr}.result-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:360px){.state-panel,.query-panel{padding:1rem}.workspace-actions-secondary .button{width:100%}}