.pt-input-row{
display:flex;
align-items:flex-end;
gap:var(--gd2);
}
.pt-host-group{
flex:1;
display:flex;
flex-direction:column;
gap:8px;
min-width:0;
}
.pt-port-group{
width:160px;
flex-shrink:0;
display:flex;
flex-direction:column;
gap:8px;
}
.pt-port-field{
position:relative;
}
.pt-port-clear{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
width:28px;
height:28px;
display:none;
align-items:center;
justify-content:center;
padding:0;
background:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
font-family:var(--ff3);
font-size:16px;
font-weight:700;
line-height:1;
color:var(--tx2);
cursor:pointer;
transition:60ms;
user-select:none;
}
.pt-port-clear.visible{
display:flex;
}
.pt-port-clear:hover{
border-color:var(--rd1);
color:var(--rd1);
}
.pt-host-input,
.pt-port-input{
height:var(--iz1);
padding:0 32px;
font-family:var(--ff3);
font-size:20px;
font-weight:700;
color:var(--tx1);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br2);
outline:none;
box-sizing:border-box;
width:100%;
box-shadow:var(--fbs);
}
.pt-host-input:focus,
.pt-port-input:focus{
border-color:var(--cl1);
}
.pt-host-input::placeholder,
.pt-port-input::placeholder{
color:var(--tx3);
font-weight:400;
}
.pt-test-btn{
height:var(--iz1);
width:var(--iz1);
font-family:var(--ff2);
font-size:20px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--blk);
background-color:var(--cl1);
border:none;
border-radius:var(--br2);
cursor:pointer;
transition:60ms;
box-sizing:border-box;
white-space:nowrap;
flex-shrink:0;
}
.pt-test-btn:hover:not(:disabled){
background-color:var(--oh2);
}
.pt-test-btn.pressed:not(:disabled){
transform:translateY(2px) scale(0.97);
}
.pt-test-btn:disabled{
background-color:var(--bg4);
color:var(--tx3);
cursor:not-allowed;
opacity:0.6;
}
.pt-test-btn.stop{
background-color:var(--rd1);
color:var(--blk);
opacity:1;
cursor:pointer;
}
.pt-pills{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:var(--gd2);
}
.pt-pills:empty{
display:none;
}
.pt-pill{
display:flex;
align-items:center;
justify-content:center;
height:32px;
padding:0 12px;
background:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
font-family:var(--ff3);
font-size:14px;
font-weight:700;
color:var(--tx2);
cursor:pointer;
transition:60ms;
user-select:none;
}
.pt-pill:hover{
border-color:var(--cl1);
color:var(--cl1);
}
.pt-pill.active{
border-color:var(--cl1);
color:var(--cl1);
background-color:rgba(255,85,17,0.15);
}
.pt-results{
display:flex;
flex-direction:column;
}
.pt-results:not(:empty){
margin-top:var(--gd2);
}
.pt-result{
display:flex;
align-items:baseline;
gap:10px;
padding:6px 0;
background:none;
border:none;
font-family:var(--ff3);
font-size:15px;
color:var(--tx2);
animation:pt_slide_in 0.2s ease;
}
@keyframes pt_slide_in{
from{opacity:0;transform:translateY(-8px);}
to{opacity:1;transform:translateY(0);}
}
.pt-dot{
width:10px;
height:10px;
border-radius:50%;
flex-shrink:0;
align-self:center;
}
.pt-dot-open{background-color:var(--cl2);}
.pt-dot-closed{background-color:var(--rd1);}
.pt-dot-timeout{background-color:var(--rd1);}
.pt-dot-error{background-color:var(--rd1);}
.pt-dot-pending{
background-color:var(--tx3);
animation:pt_pulse 0.8s infinite alternate;
}
@keyframes pt_pulse{
from{opacity:0.4;}
to{opacity:1;}
}
.pt-result-host{
font-weight:700;
color:var(--tx1);
flex-shrink:0;
white-space:nowrap;
}
.pt-result-label{
font-family:var(--ff2);
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
flex-shrink:0;
}
.pt-open .pt-result-label{color:var(--cl2);}
.pt-closed .pt-result-label{color:var(--rd1);}
.pt-timeout .pt-result-label{color:var(--rd1);}
.pt-result-ms{
color:var(--tx3);
font-size:13px;
flex-shrink:0;
}
.pt-result-ip{
color:var(--tx3);
font-size:13px;
flex-shrink:0;
white-space:nowrap;
margin-left:auto;
}
.pt-result-status{
color:var(--tx3);
font-size:13px;
flex-shrink:0;
}
.pt-pending .pt-result-status{
color:var(--tx3);
}
.pt-error .pt-result-status{
color:var(--rd1);
}
@media(max-width:600px){
.pt-input-row{
flex-wrap:wrap;
}
.pt-host-group{
width:100%;
}
.pt-port-group{
flex:1;
width:auto;
}
.pt-host-input,
.pt-port-input{
height:56px;
font-size:18px;
padding:0 36px 0 16px;
}
.pt-test-btn{
height:56px;
font-size:18px;
padding:0 28px;
}
.pt-result{
flex-wrap:wrap;
gap:4px;
}
.pt-result-ip{
width:100%;
}
}