#detail-dialog{
  width:920px;
  padding:0;
  border:1px solid #dce5e8;
  border-radius:14px;
  color:#203438;
  max-height:90vh;
  overflow:auto;
}
#detail-dialog::backdrop{background:#152e3966;backdrop-filter:blur(2px)}
#detail-dialog .dialog-heading{
  padding:24px 28px 18px;
  margin:0;
  position:relative;
}
#detail-dialog .dialog-heading>div{
  padding-left:54px;
  position:relative;
}
#detail-dialog .dialog-heading>div:before{
  content:"";
  position:absolute;
  left:0;top:2px;
  width:40px;height:44px;
  border-radius:10px;
  background:#e7f5f1;
}
#detail-dialog .dialog-heading>div:after{
  content:"◈";
  position:absolute;
  left:10px;top:2px;
  font-size:27px;
  color:#078775;
}
#detail-dialog .dialog-heading .eyebrow{display:none}
#detail-dialog .dialog-heading h2{font-size:23px;margin:0}
#detail-dialog .dialog-heading h2:after{
  content:"设备配置";
  display:block;
  font-size:12px;
  font-weight:400;
  color:#819095;
  margin-top:3px;
}
#detail-dialog .close{font-size:28px;padding:2px 7px}
#detail-dialog .config-tabs{
  display:flex;
  gap:25px;
  padding:0 28px;
  border-bottom:1px solid #e1e8eb;
}
#detail-dialog .config-tabs button{
  border-radius:0;
  padding:13px 5px;
  background:none;
  color:#7b898e;
  border-bottom:3px solid transparent;
  font-size:15px;
}
#detail-dialog .config-tabs button[aria-selected=true]{
  color:#078775;
  border-bottom-color:#078775;
}
#detail-dialog .config-page{padding:20px 28px 24px}
#detail-dialog .config-page>p{font-size:13px;color:#7a898e}
#detail-dialog .connection-fields{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
}
#detail-dialog .connection-field{
  padding:15px 14px;
  border:0;
  border-bottom:1px solid #e5ebee;
  border-radius:0;
  background:white;
  min-width:0;
}
#detail-dialog .connection-field .field-label{
  font-size:12px;
  color:#7c8b90;
  margin-bottom:6px;
}
#detail-dialog .connection-field code{
  font-size:14px;
  line-height:1.8;
  color:#253c42;
  padding-right:8px;
}
#detail-dialog .connection-field .text-button{
  font-size:12px;
  color:#078775;
  padding:2px 5px;
}
#detail-dialog .connection-field.topic-field{
  margin-top:18px;
  background:#eef8f5;
  border-bottom:0;
  padding:16px;
}
#detail-dialog .connection-field.prefix-field{
  grid-column:1/-1;
  background:#eef8f5;
  padding:12px 16px;
  border:0;
}
#detail-dialog .connection-field.prefix-field .field-label{
  display:inline-block;
  margin-right:14px;
}
#detail-dialog .connection-field.prefix-field code{display:inline}
#detail-dialog .config-footer{
  position:sticky;
  bottom:0;
  background:white;
  border-top:1px solid #e1e8eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 28px;
  z-index:5;
}
#detail-dialog .config-footer .dialog-actions{margin:0;gap:9px}
#detail-dialog button{font-size:13px;border-radius:7px}
#detail-dialog .primary{background:#078775;box-shadow:none}
#detail-dialog .primary:hover{background:#066f61}
#detail-dialog .device-more{position:relative}
#detail-dialog .device-more summary{
  cursor:pointer;
  list-style:none;
  border:1px solid #dce4e8;
  border-radius:7px;
  padding:9px 13px;
  font-size:13px;
  white-space:nowrap;
}
#detail-dialog .device-more summary::-webkit-details-marker{display:none}
#detail-dialog .device-more-panel{
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;
  width:180px;
  background:white;
  border:1px solid #dce5e8;
  border-radius:8px;
  box-shadow:0 8px 25px #183c3920;
  padding:6px;
  z-index:10;
}
#detail-dialog .device-more-panel button{
  width:100%;
  display:block;
  text-align:left;
  border:0;
  background:white;
  margin:0;
  padding:10px 12px;
}
#detail-dialog .device-more-panel button:hover{background:#f3f7f7}
#detail-dialog .device-more-panel .danger-outline{color:#bd4745}
#detail-dialog #rules-form textarea{
  min-height:170px;
  font-size:14px;
  line-height:1.9;
}
#detail-dialog #rules-form label{font-size:14px}
#detail-dialog #detail-warning{margin:0;padding:0 28px 14px}
@media(max-width:700px){
  #detail-dialog .dialog-heading{padding:20px}
  #detail-dialog .config-tabs{padding:0 20px}
  #detail-dialog .config-page{padding:18px 20px}
  #detail-dialog .connection-fields{grid-template-columns:1fr}
  #detail-dialog .connection-field.prefix-field{grid-column:auto}
  #detail-dialog .config-footer{padding:14px 20px;flex-wrap:wrap}
  #detail-dialog .config-footer .dialog-actions{flex:1;justify-content:flex-end}
  #detail-dialog .config-footer button{padding:9px 11px}
}

/* 配置弹窗第二版：固定高度、紧凑参数、深青标题栏 */
#detail-dialog[open]{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  height:760px;
  max-height:90vh;
  max-height:90dvh;
  overflow:hidden;
}
#detail-dialog .dialog-heading{
  grid-row:1;
  background:#086b60;
  color:white;
  padding:19px 26px;
  min-height:88px;
}
#detail-dialog .dialog-heading>div:before{
  background:#ffffff18;
}
#detail-dialog .dialog-heading>div:after{
  color:white;
}
#detail-dialog .dialog-heading h2{
  color:white;
  font-size:23px;
}
#detail-dialog .dialog-heading h2:after{
  color:#ffffffbb;
}
#detail-dialog .dialog-heading .close{
  color:white;
  background:transparent;
  border:0;
  border-radius:7px;
  padding:4px 9px;
  outline-offset:1px;
}
#detail-dialog .dialog-heading .close:hover{
  background:#ffffff20;
}
#detail-dialog .config-tabs{
  grid-row:2;
  padding:0 26px;
  gap:25px;
  background:white;
}
#detail-dialog .config-tabs button{
  padding:12px 4px;
}
#detail-dialog .config-page{
  grid-row:3;
  grid-column:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px 26px;
}
#detail-dialog .config-page>p{
  margin:0 0 13px;
  font-size:13px;
}
#detail-dialog .connection-fields{
  gap:0;
  align-items:stretch;
}
#detail-dialog .connection-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-content:start;
  align-items:center;
  column-gap:10px;
  row-gap:4px;
  padding:10px 12px;
  min-height:67px;
}
#detail-dialog .connection-field .field-label{
  grid-column:1;
  grid-row:1;
  margin:0;
  font-size:12px;
}
#detail-dialog .connection-field code{
  grid-column:1;
  grid-row:2;
  min-width:0;
  padding:0;
  font-size:13px;
  line-height:1.7;
}
#detail-dialog .connection-field .text-button{
  float:none;
  margin:0;
  padding:1px 3px;
  font-size:12px;
  justify-self:end;
}
#detail-dialog .connection-field>.text-button:first-child{
  grid-column:2;
  grid-row:1;
}
#detail-dialog .connection-field>.text-button:last-child:not(:first-child){
  grid-column:2;
  grid-row:2;
}
#detail-dialog .connection-field.topic-field{
  margin-top:14px;
  padding:13px;
}
#detail-dialog .connection-field.topic-field code{
  line-height:1.8;
}
#detail-dialog .connection-field.prefix-field{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto;
  min-height:42px;
  padding:10px 13px;
  column-gap:12px;
}
#detail-dialog .connection-field.prefix-field .field-label{
  grid-column:1;
  grid-row:1;
  margin:0;
}
#detail-dialog .connection-field.prefix-field code{
  grid-column:2;
  grid-row:1;
}
#detail-dialog .connection-field.prefix-field>.text-button:first-child{
  grid-column:3;
  grid-row:1;
}
#detail-dialog #rules-form{
  margin-top:20px;
}
#detail-dialog #rules-form .two-col{
  gap:20px;
}
#detail-dialog #rules-form label{
  margin-bottom:15px;
}
#detail-dialog #rules-form textarea{
  min-height:160px;
  height:160px;
  max-height:240px;
  line-height:1.8;
  font-size:13px;
}
#detail-dialog #rules-form>button{
  display:block;
  margin-left:auto;
  padding:10px 22px;
}
#detail-dialog .config-footer{
  grid-row:4;
  position:relative;
  bottom:auto;
  padding:15px 26px;
  min-height:73px;
}
#detail-dialog #detail-warning{
  grid-row:5;
  margin:0;
  padding:8px 26px 12px;
  max-height:85px;
  overflow:auto;
}
#detail-dialog #detail-warning:empty{
  display:none;
}
@media(max-width:700px){
  #detail-dialog[open]{
    height:820px;
    max-height:94vh;
    max-height:94dvh;
  }
  #detail-dialog .dialog-heading{
    padding:17px 18px;
    min-height:80px;
  }
  #detail-dialog .config-tabs{padding:0 18px}
  #detail-dialog .config-page{padding:14px 18px}
  #detail-dialog .connection-field{padding:9px 8px}
  #detail-dialog .config-footer{
    padding:12px 18px;
    gap:10px;
  }
  #detail-dialog #rules-form textarea{
    min-height:115px;
    height:115px;
  }
}