.pt-app{
  --pt-bg:#080b12;
  --pt-panel:#0f141d;
  --pt-line:#1e2836;
  --pt-txt:#d7e0ec;
  --pt-muted:#5f6f82;
  --pt-amber:#ffb454;
  --pt-cyan:#38d0d8;
  --pt-red:#ff6a6a;
  --pt-grid:#182234;
  --pt-mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,"Courier New",monospace;

  background:
    radial-gradient(1100px 560px at 82% -12%, #10263018, transparent 62%),
    var(--pt-bg);
  color:var(--pt-txt);
  font-family:var(--pt-mono);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
  border:1px solid var(--pt-line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.pt-app *{box-sizing:border-box}


.pt-app{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
}


.pt-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.pt-dot{
  width:9px;height:9px;border-radius:50%;background:var(--pt-amber);
  box-shadow:0 0 10px var(--pt-amber);flex:0 0 auto;
}
.pt-dot.live{animation:pt-pulse 1.6s ease-in-out infinite}
@keyframes pt-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pt-dot.live{animation:none}}

.pt-top h1{
  margin:0;font-size:13px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--pt-txt);
}
.pt-sub{color:var(--pt-muted);font-size:11px}

.pt-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pt-ip{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pt-muted);white-space:nowrap}
.pt-ip b{color:var(--pt-amber);font-weight:600;letter-spacing:.04em;text-transform:none;font-size:11px}
.pt-badge{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pt-cyan);border:1px solid var(--pt-cyan);
  border-radius:20px;padding:2px 10px;white-space:nowrap;
}
.pt-badge.off{color:var(--pt-red);border-color:var(--pt-red);box-shadow:0 0 14px #ff6a6a40}
.pt-home{
  color:var(--pt-muted);text-decoration:none;font-size:11px;
  border-bottom:1px dashed transparent;transition:.15s;
}
.pt-home:hover{color:var(--pt-amber);border-bottom-color:var(--pt-amber)}


.pt-controls{
  flex:0 0 auto;
  display:grid;grid-template-columns:1fr 120px auto auto auto;gap:9px;
  background:var(--pt-panel);border:1px solid var(--pt-line);
  border-radius:12px;padding:10px 11px;
}
.pt-field label{
  display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pt-muted);margin-bottom:4px;
}
.pt-field input{
  width:100%;background:var(--pt-bg);border:1px solid var(--pt-line);
  color:var(--pt-txt);border-radius:8px;padding:8px 11px;
  font-family:inherit;font-size:13px;outline:none;transition:.15s;
}
.pt-field input:focus{border-color:var(--pt-amber);box-shadow:0 0 0 3px #ffb45420}
.pt-field input::placeholder{color:#3d4a5c}

.pt-btn{
  align-self:end;border:1px solid var(--pt-line);background:#131a26;
  color:var(--pt-txt);font-family:inherit;font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 15px;
  border-radius:8px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.pt-btn:hover{border-color:var(--pt-muted)}
.pt-btn.go{
  border-color:var(--pt-amber);color:var(--pt-amber);
  background:linear-gradient(180deg,#ffb45422,#ffb45410);
}
.pt-btn.go:hover{background:#ffb45433}
.pt-btn.go.stop{
  border-color:var(--pt-red);color:var(--pt-red);
  background:linear-gradient(180deg,#ff6a6a22,#ff6a6a10);
}
.pt-btn.go.stop:hover{background:#ff6a6a33}


.pt-stats{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.pt-stat{
  background:var(--pt-panel);border:1px solid var(--pt-line);
  border-radius:10px;padding:8px 11px;min-width:0;
}
.pt-stat .k{
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pt-muted);margin-bottom:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.pt-stat .v{
  font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pt-stat .v.sm{font-size:15px}
.v.cyan{color:var(--pt-cyan)}
.v.red{color:var(--pt-red)}
.v.amber{color:var(--pt-amber)}
.pt-stat .v small{font-size:11px;color:var(--pt-muted);font-weight:400;margin-left:3px}


.pt-graph{
  flex:0 0 auto;height:120px;position:relative;
  background:var(--pt-panel);border:1px solid var(--pt-line);
  border-radius:10px;padding:7px;
}
.pt-graph canvas{width:100%;height:100%;display:block}
.pt-graph .peak{
  position:absolute;top:6px;right:10px;font-size:10px;color:var(--pt-muted);
  pointer-events:none;
}


.pt-console{
  flex:0 0 auto;height:300px;overflow-y:auto;overflow-x:hidden;
  background:#05070b;border:1px solid var(--pt-line);border-radius:10px;
  padding:10px 13px;font-size:12.5px;line-height:1.75;
}
.pt-console::-webkit-scrollbar{width:8px}
.pt-console::-webkit-scrollbar-thumb{background:var(--pt-line);border-radius:4px}
.pt-console::-webkit-scrollbar-track{background:transparent}
.pt-row{white-space:pre-wrap;word-break:break-word;font-variant-numeric:tabular-nums}
.pt-row .seq{color:var(--pt-muted)}
.pt-row.ok .ms{color:var(--pt-cyan)}
.pt-row.bad{color:var(--pt-red)}
.pt-row.note,.pt-row .note{color:var(--pt-muted)}


@media (max-width:900px){
  .pt-controls{grid-template-columns:1fr 110px;grid-auto-rows:auto}
  .pt-controls .pt-btn{grid-column:span 1}
  .pt-stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:700px){
  .pt-app{padding:12px}
  .pt-graph{height:100px}
  .pt-console{height:240px}
}

@media (max-width:430px){
  .pt-top h1{font-size:12px;letter-spacing:.16em}
  .pt-sub{display:none}
  .pt-controls{grid-template-columns:1fr 1fr}
}