/* Scopăm totul în secțiunea speedtest ca să nu atingă restul site-ului */
.hst-speedtest-section{
  min-height:70vh;
  display:grid;
  place-items:center;
  padding:32px 0;
}

/* mapping pentru clasele JS originale (doar în secțiune) */
.hst-speedtest-section .visible{ display:block; animation:stFadeIn .25s ease }
.hst-speedtest-section .hidden{ display:none; animation:stFadeOut .25s ease }
@keyframes stFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes stFadeOut{ from{opacity:1} to{opacity:0} }

/* loader */
.hst-loading{ text-align:center; }
.hst-loading-text{
  display:inline-flex; gap:10px; align-items:center;
  font-size:1rem; color:#a9b4c2;
}
.hst-spinner{
  width:18px;height:18px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#4ea8ff;
  animation:hstspin .7s linear infinite;
}
@keyframes hstspin{ to{ transform: rotate(360deg) } }

/* card general */
.hst-card{
  width:100%; max-width:980px; position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px; padding:18px; color:#e6edf3;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  overflow:hidden;
}
.hst-card:before{
  content:""; position:absolute; inset:-1px; border-radius:22px;
  background:conic-gradient(from 180deg,#f953c6,#b91d73,#4ea8ff,#f953c6);
  filter:blur(18px); opacity:.18; z-index:0;
}
.hst-card>*{ position:relative; z-index:1 }

.hst-topbar{ display:flex; gap:16px; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap }
.hst-select{ display:flex; gap:10px; align-items:center }
.hst-select label{ font-size:.95rem; color:#a9b4c2; margin:0 }
.hst-select #server{
  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.06); color:#e6edf3;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:10px 14px; font-size:.95rem; outline:none; min-width:220px;
  transition:.2s ease;
}
.hst-select #server:focus{ border-color:rgba(78,168,255,.6); box-shadow:0 0 0 4px rgba(78,168,255,.12) }

/* butonul original (#startStopBtn) — păstrăm id-ul și adăugăm skin modern */
.hst-topbar #startStopBtn{
  display:inline-block;
  border:0; border-radius:14px; padding:12px 22px;
  font-weight:700; letter-spacing:.2px; color:#fff;
  background:linear-gradient(90deg,#f953c6,#b91d73);
  cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 10px 24px rgba(185,29,115,.35);
}
.hst-topbar #startStopBtn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(185,29,115,.45) }
.hst-topbar #startStopBtn:active{ transform:translateY(0); opacity:.95 }
.hst-topbar #startStopBtn::before{ content:"Start" }
/* JS-ul original pune clasa "running" pe #startStopBtn — o stilizăm aici */
.hst-topbar #startStopBtn.running{ background:linear-gradient(90deg,#ef4444,#f97316); box-shadow:0 10px 24px rgba(239,68,68,.35) }
.hst-topbar #startStopBtn.running::before{ content:"Abort" }

/* layout intern */
.hst-content{ display:flex; flex-direction:column; gap:18px }
.hst-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:8px }
.hst-stat{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:16px; text-align:center
}
.hst-stat-title{ color:#a9b4c2; font-size:.95rem; margin-bottom:4px }
.hst-stat-value{ font-size:2.2rem; font-weight:800; line-height:1.1 }
.hst-stat-value:empty::before{ content:"0.00"; color:rgba(255,255,255,.4) }
.hst-stat-unit{ color:#a9b4c2; font-size:.9rem; margin-top:2px }

.hst-gauges{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.hst-gauge{
  position:relative; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:14px; text-align:center; overflow:hidden
}
.hst-gauge-title{ color:#a9b4c2; font-size:1rem; margin-bottom:6px }
.hst-meter{ width:100%; height:220px; display:block }
.hst-gauge-value{ position:absolute; bottom:38px; left:0; right:0; font-size:2.4rem; font-weight:800 }
.hst-gauge-value:empty::before{ content:"0.00"; color:rgba(255,255,255,.4) }
.hst-gauge-unit{ position:absolute; bottom:16px; left:0; right:0; color:#a9b4c2; font-size:.9rem }

.hst-ip{ text-align:center; color:#a9b4c2; font-size:.95rem; padding-top:2px; min-height:22px }

.hst-share{ margin-top:8px; background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.12); border-radius:14px; padding:12px }
.hst-share-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center }
.hst-share-label{ color:#a9b4c2; font-size:.9rem }
.hst-share-id{ font-weight:700 }
.hst-share #resultsURL{
  width:100%; background:rgba(255,255,255,.06); color:#e6edf3;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 12px; font-size:.95rem; outline:none
}
.hst-share-img{ width:100%; max-height:220px; object-fit:contain; margin-top:8px }

@media (max-width:900px){ .hst-gauges{ grid-template-columns:1fr } }
@media (max-width:640px){
  .hst-stats{ grid-template-columns:1fr }
  .hst-topbar{ flex-direction:column; align-items:stretch }
  .hst-select #server{ width:100% }
  .hst-topbar #startStopBtn{ width:100%; text-align:center }
}
/* Fortăm text negru pe speedtest */
.hst-speedtest-section,
.hst-speedtest-section * {
  color:#111 !important;
}
/* Facem textul butonului Start/Stop alb */
#startStopBtn {
  color:#fff !important;
}