
.tr-wrap{margin:0.25rem 0 0.5rem}
.tr-tabs{display:flex;border-bottom:2px solid #eee;user-select:none}
.night .tr-tabs{border-bottom-color:#444}
.tr-tab{display:inline-block;padding:0.5rem 1.1rem;font-size:0.7rem;color:#666;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px}
.tr-tab.on{color:#009688;border-bottom-color:#009688;font-weight:bold}
.night .tr-tab{color:#aaa}
.night .tr-tab.on{color:#3ddc97;border-bottom-color:#3ddc97}
.tr-form{padding:0.6rem 0.25rem}
.tr-row{display:flex;align-items:center;margin-bottom:0.6rem}
.tr-label{width:4.5rem;flex:none;font-size:0.65rem;color:#666}
.night .tr-label{color:#aaa}
.tr-ctrl{flex:1;display:flex;align-items:center;flex-wrap:wrap;min-width:0}
.tr-ctrl .layui-input{height:1.9rem;line-height:1.9rem;padding:0 0.6rem;flex:1;min-width:6rem;font-size:0.65rem}
.tr-unit{font-size:0.6rem;color:#999;margin-left:0.4rem;flex:none}
.night .tr-unit{color:#888}
.tr-check{font-size:0.6rem;color:#666;margin-left:0.6rem;display:inline-flex;align-items:center;cursor:pointer;flex:none;white-space:nowrap}
.tr-check input{margin-right:0.25rem;width:0.8rem;height:0.8rem;cursor:pointer}
.night .tr-check{color:#aaa}
.tr-select{height:1.9rem;line-height:1.9rem;border:1px solid #eee;border-radius:3px;background:#fff;color:#555;padding:0 0.5rem;font-size:0.65rem;flex:1;min-width:6rem}
.night .tr-select{background:#181a1b;border-color:#444;color:#aaa}
.tr-btns{display:flex;align-items:center;flex-wrap:wrap;margin:0.5rem 0 0.6rem}
.tr-btn{padding:0.4rem 1rem;text-align:center;border:0;background-color:#607D8B;color:#fff;border-radius:3px;cursor:pointer;font-size:0.6rem;margin-right:0.4rem}
.tr-btn-go{background-color:#009688}
.tr-btn-stop{background-color:#f56c6c}
.tr-btn:disabled{opacity:0.45;cursor:not-allowed}
.tr-stat{margin-left:0.6rem;font-size:0.65rem;color:#888;flex:none}
.tr-stat b{color:#009688;font-size:0.75rem}
.night .tr-stat{color:#999}
.night .tr-stat b{color:#3ddc97}
.tr-statusbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.15rem 0.5rem;font-size:0.6rem;color:#999;background:#f7f7f7;border:1px solid #eee;border-radius:3px;padding:0.35rem 0.6rem;margin-bottom:0.5rem}
.night .tr-statusbar{background:#181a1b;border-color:#444;color:#aaa}
.tr-preview{border:1px solid #eee;border-radius:3px;overflow:hidden}
.night .tr-preview{border-color:#444}
.tr-preview-head{display:flex;justify-content:space-between;align-items:center;padding:0.3rem 0.6rem;background:#f7f7f7;border-bottom:1px solid #eee;font-size:0.6rem;color:#888}
.night .tr-preview-head{background:#181a1b;border-bottom-color:#444;color:#aaa}
.tr-preview iframe{width:100%;height:13rem;border:0;display:block;background:#fff}
.tr-mini-btn{font-size:0.6rem;color:#009688;cursor:pointer;margin-left:0.5rem;flex:none;white-space:nowrap}
.tr-mini-btn:hover{text-decoration:underline}
.night .tr-mini-btn{color:#3ddc97}
.tr-tips{font-size:0.6rem;padding:0.6rem 0.75rem;background-color:#fcf7ef;margin-top:0.6rem;border-radius:6px;border:1px solid #ebd3b0;color:#ff7503;line-height:1.6}
.tr-tips p{margin:0.15rem 0}
.night .tr-tips{background-color:#444;border:1px solid #555;color:#ffb257}
.tr-ihead{display:flex;align-items:center;font-size:0.6rem;color:#999}
.tr-ihead span{flex:1;min-width:0}
.tr-ihead span:nth-child(2){margin-left:0.4rem;margin-right:0.4rem}
.tr-ihead span:nth-child(3){width:1.2rem;flex:none}
.night .tr-ihead{color:#888}
.tr-ifields{margin:0.4rem 0 0.4rem 4.5rem}
.tr-irow{display:flex;align-items:center;margin-bottom:0.4rem}
.tr-irow .layui-input{height:1.9rem;line-height:1.9rem;padding:0 0.6rem;font-size:0.65rem;width:100%}
.tr-irow .tr-isel{flex:1;min-width:0}
.tr-irow .tr-ival{flex:1;min-width:0;margin-left:0.4rem}
.tr-idel{width:1.2rem;flex:none;text-align:center;font-size:0.85rem;color:#ccc;cursor:pointer;line-height:1.9rem;margin-left:0.4rem;user-select:none}
.tr-idel:hover{color:#f56c6c}
.night .tr-idel{color:#666}
.night .tr-idel:hover{color:#f56c6c}
.tr-addrow{display:inline-block;font-size:0.6rem;color:#009688;border:1px dashed #009688;border-radius:3px;padding:0.25rem 0.6rem;cursor:pointer;margin:0 0 0.6rem 4.5rem}
.tr-addrow:hover{background:rgba(0,150,136,0.06)}
.night .tr-addrow{color:#3ddc97;border-color:#3ddc97}
.night .tr-addrow:hover{background:rgba(61,220,151,0.08)}
@media screen and (max-width:600px){
.tr-label{flex:0 0 100%;width:100%;margin-bottom:0.2rem}
.tr-ctrl{flex:1 1 100%}
.tr-ctrl .layui-input,.tr-ctrl .tr-select{min-width:0}
.tr-row{flex-wrap:wrap}
.tr-btns .tr-btn{flex:1;margin-right:0.3rem}
.tr-stat{margin-left:0.3rem}
.tr-ifields{margin-left:0}
.tr-addrow{margin-left:0}
.tr-irow{flex-wrap:wrap}
.tr-irow .tr-ival{margin-left:0;margin-top:0.3rem}
}
