/* thepicknetwork-speed-test — estilos autocontenidos (no dependen del tema) */
.tpn-speed-tool {
  --tpn-bg-card: rgba(22,27,34,.82);
  --tpn-border: rgba(240,246,252,.12);
  --tpn-text: #e6edf3;
  --tpn-text-muted: #9198a1;
  --tpn-accent: #58a6ff;
  --tpn-green: #3fb950;
  --tpn-yellow: #d29922;
  --tpn-red: #f85149;
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  color: var(--tpn-text);
  max-width: 700px;
  margin: 0 auto;
  padding: 8px 0 40px;
}
.tpn-speed-tool * { box-sizing: border-box; }

.tpn-tool-hero { text-align: center; padding: 24px 16px 32px; }
.tpn-tool-hero h2 { font-size: clamp(24px,4vw,34px); margin: 0 0 12px; }
.tpn-tool-hero p { color: var(--tpn-text-muted); font-size: 16px; max-width: 560px; margin: 0 auto 24px; line-height: 1.7; }

.tpn-tool-form { display: flex; justify-content: center; }
.tpn-btn-primary {
  background: var(--tpn-accent); color: #0d1117; border: none; border-radius: 8px;
  padding: 14px 32px; font-family: inherit; font-size: 17px; font-weight: 700;
  cursor: pointer; transition: opacity .2s;
}
.tpn-btn-primary:hover { opacity: .88; }
.tpn-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.tpn-tool-error {
  display: none; margin: 16px auto 0; max-width: 500px; color: var(--tpn-red);
  background: rgba(248,81,73,.08); border: 1px solid rgba(248,81,73,.3);
  border-radius: 6px; padding: 10px 16px; font-size: 15px; text-align: center;
}
.tpn-tool-error.show { display: block; }

.tpn-speed-status { text-align: center; margin-top: 16px; color: var(--tpn-text-muted); font-size: 15px; min-height: 20px; }

.tpn-speed-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 16px; }
.tpn-speed-gauge {
  background: var(--tpn-bg-card); border: 1px solid var(--tpn-border); border-radius: 12px;
  padding: 28px 20px; text-align: center;
}
.tpn-g-icon { font-size: 30px; margin-bottom: 8px; }
.tpn-g-val { font-size: 36px; font-weight: 800; line-height: 1; }
.tpn-g-unit { font-size: 13px; color: var(--tpn-text-muted); margin: 4px 0 10px; }
.tpn-g-label { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--tpn-text-muted); margin-bottom: 14px; }
.tpn-bar-track { height: 6px; background: var(--tpn-border); border-radius: 3px; overflow: hidden; }
.tpn-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--tpn-accent), var(--tpn-green)); transition: width .3s ease; }

@media (max-width: 520px) {
  .tpn-speed-gauges { grid-template-columns: 1fr; }
}