/* compact mode – deixa a UI mais enxuta, boa pra iframe */
:root{
  --fg:#eaeaea; --muted:#b0b0b0; --accent:#7c83ff;
}

html,body{ margin:0; padding:0; background:transparent!important; }
#privacyPolicy, a[href*="privacy"], .logo, .version { display:none!important; }

/* container geral */
#main{
  max-width: 980px;
  margin: 0 auto !important;
  padding: 12px 12px 0 12px !important;
}

/* título */
#title{
  font-size: 28px !important;
  margin-bottom: 8px !important;
}

/* botão */
#startStopBtn{
  font-size: 16px !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  margin: 10px auto 4px auto !important;
}

/* blocos ping/jitter */
#ping,#jit{
  margin: 8px 0 !important;
}
#pingText,#jitText{ font-size: 28px !important; }
#ping,#jit small{ color: var(--muted); }

/* gauges download/upload */
#down, #up{
  margin-top: 8px !important;
}
#dlText, #ulText{
  font-size: 32px !important;
}
#down span.small, #up span.small{ color:var(--muted); }

/* linha do IP */
#ipInfo, #ip { font-size: 12px !important; opacity:.8; }

/* bordas do card/iframe look */
body{ color:var(--fg); }
.card-like{
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}

/* layout responsivo: empilha no mobile e reduz as fontes */
@media (max-width: 820px){
  #title{ font-size: 24px !important; }
  #dlText,#ulText{ font-size: 28px !important; }
  #pingText,#jitText{ font-size: 24px !important; }
  #main{ padding: 8px!important; }
}
@media (max-width: 560px){
  #title{ font-size: 20px!important; }
  #startStopBtn{ font-size: 14px!important; padding: 6px 14px!important; }
  #dlText,#ulText{ font-size: 24px!important; }
  #pingText,#jitText{ font-size: 20px!important; }
  #ipInfo,#ip{ display:none!important; }
}