/* 消息测试页 */
#workspace #test-tab .page-heading{margin-bottom:22px}
#workspace #test-tab .test-connection{
  padding:16px 20px;
  gap:16px;
  margin-bottom:18px;
  min-height:76px;
}
#workspace #test-tab .test-connection>label{
  display:flex;
  align-items:center;
  gap:18px;
  flex:0 1 340px;
  min-width:220px;
  font-size:14px;
}
#workspace #test-tab .test-connection select{
  flex:1;
  width:0;
  min-width:0;
  margin:0;
  height:42px;
  font-size:14px;
}
#workspace #test-tab .test-connection button{
  align-self:center;
  margin:0;
  height:42px;
}
#workspace #test-tab #test-expiry{
  margin-left:auto;
  font-size:12px;
}
#workspace #test-tab #mqtt-state{
  white-space:nowrap;
  font-size:12px;
}
#workspace #test-tab .subscription-bar{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  margin-bottom:18px;
  min-height:76px;
}
#workspace #test-tab .subscription-bar h2{display:none}
#workspace #test-tab .subscription-bar>label{
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
  min-width:200px;
  margin:0;
  font-size:14px;
  white-space:nowrap;
}
#workspace #test-tab #subscribe-topic{
  flex:1;
  width:0;
  min-width:0;
  margin:0;
  height:42px;
  font-size:14px;
}
#workspace #test-tab .subscription-bar button{
  margin:0;
  height:42px;
}
#workspace #test-tab .subscription-bar p{
  flex:0 1 320px;
  margin:0;
  font-size:12px;
  color:#87969b;
}
#workspace #test-tab .test-grid{
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:18px;
  align-items:stretch;
}
#workspace #test-tab .publish-panel{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:20px;
  min-width:0;
}
#workspace #test-tab .publish-panel h2{
  margin:-20px -20px 18px;
  padding:17px 20px;
  border-bottom:1px solid #e5ebee;
  font-size:19px;
}
#workspace #test-tab .publish-panel>label{
  font-size:14px;
  margin-bottom:16px;
}
#workspace #test-tab #publish-topic{
  height:42px;
  font-size:14px;
}
#workspace #test-tab .payload-label{
  display:flex;
  flex:1;
  flex-direction:column;
}
#workspace #test-tab #payload{
  flex:1;
  height:clamp(140px,22vh,230px);
  min-height:110px;
  max-height:320px;
  font-size:13px;
  line-height:1.8;
  resize:vertical;
}
#workspace #test-tab .publish-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}
#workspace #test-tab .publish-actions .toolbar{
  flex:1;
  gap:14px;
}
#workspace #test-tab .publish-actions label{
  margin:0;
  font-size:12px;
}
#workspace #test-tab .publish-actions .toolbar>label:not(.checkbox){
  display:flex;
  align-items:center;
  gap:8px;
}
#workspace #test-tab #qos{
  width:145px;
  margin:0;
  height:40px;
  padding:7px 9px;
  font-size:12px;
}
#workspace #test-tab #retain{margin:0}
#workspace #test-tab #mqtt-publish{
  margin:0 0 0 auto;
  height:42px;
  padding:9px 18px;
}
#workspace #test-tab .log-panel{
  min-width:0;
  min-height:0;
  height:clamp(360px,49vh,540px);
  max-height:none;
}
#workspace #test-tab .log-panel .panel-heading{
  padding:17px 20px;
}
#workspace #test-tab .log-panel .panel-heading h2{font-size:19px}
#workspace #test-tab #message-log{
  min-height:0;
  overflow:auto;
  background:white;
  overscroll-behavior:contain;
}
#workspace #test-tab .log-entry{padding:15px 20px}
#workspace #test-tab .log-entry header{font-size:11px}
#workspace #test-tab .log-entry .topic{font-size:13px}
#workspace #test-tab .log-entry pre{font-size:12px}
@media(max-width:1200px){
  #workspace #test-tab .subscription-bar p{display:none}
  #workspace #test-tab .test-connection{gap:10px}
  #workspace #test-tab #test-expiry{flex-basis:100%;margin:0}
}
@media(max-width:900px){
  #workspace #test-tab .test-grid{grid-template-columns:1fr}
  #workspace #test-tab .log-panel{height:360px}
  #workspace #test-tab .test-connection{flex-wrap:wrap}
}
@media(max-width:600px){
  #workspace #test-tab .subscription-bar{
    flex-wrap:wrap;
    padding:14px;
    gap:12px;
  }
  #workspace #test-tab .subscription-bar>label{flex-basis:100%}
  #workspace #test-tab .test-connection>label{
    flex-basis:100%;
    min-width:0;
  }
  #workspace #test-tab .publish-panel{padding:16px}
  #workspace #test-tab .publish-panel h2{
    margin:-16px -16px 16px;
    padding:16px;
  }
  #workspace #test-tab .publish-actions .toolbar{flex-basis:100%}
  #workspace #test-tab #mqtt-publish{width:100%}
}